css的高级用法

模糊背景图片(:before)

类似这样的效果

  • 之前


    css的高级用法

  • 之后
css的高级用法

重点注意:颜色的变化,之后的图片相比之前的好像更暗淡一些

<div class="banner"></div>

banner放置类似上面的图片

.banner{
    width: 800px;
    height: 400px;
    position: relative;
    background: url(图片路径) no-repeat;
    background-size: cover;
}

.banner:before{
    content: ' ';
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(images/overlay.png);
    position: absolute;
    opacity: 0.5;
}

上一篇:ECS的初体验


下一篇:我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。