美文网首页
【真案例学CSS】css background:背景图片拉伸铺满

【真案例学CSS】css background:背景图片拉伸铺满

作者: 程序员成长之路 | 来源:发表于2020-08-16 05:42 被阅读0次

    实现的效果,如黄色框框内的背景图:


    最终效果

    我们在该区域的最外层的view或div中,加如下样式:

    .top-bg{
        width: 750rpx;
        height: 376rpx;
        background: url("../../static/imgs/tiaozhan/tiaozhan-bg.png") no-repeat;
        background-size:100% 100%;
    }
    

    解释:起到关键作用的是,如下这两行代码:

    background: url("img.jpg") no-repeat;
    background-size:100% 100%;
    

    但是也要注意的是,一定要给定该层的宽和高,它默认的宽和高是0、0。
    还要注意的是,如果内部的元素要出现在指定的位置,第一个元素不能用margin,不然整张图片都会下来,应该用padding。

    相关文章

      网友评论

          本文标题:【真案例学CSS】css background:背景图片拉伸铺满

          本文链接:https://www.haomeiwen.com/subject/tsmodktx.html