模糊背景图片(:before)

类似这样的效果

之前

、

之后

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

<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;
}

css的高级用法
模糊背景图片(:before) 类似这样的效果之前、之后重点注意:颜色的变化,之后的图片相比之前的好像更暗...
网络编程(六）之CSS3 2D/3D及动画
下面仍然是跟着pink老师学习CSS3更高级的用法。一、 CSS3 2D转换转换（transform）是CSS...
selenium08-css选择器高级用法
上一篇文章讲了一些关于css操作元素的基本方法,本篇将继续就css选择器的高级用法进行展开,包括css子元素选择器...
python学习笔记：xpath+css
xpath用法 CSS用法
【Animate.css】CSS动画库
本节目录 Animate.css简介 Animate.css基础用法 Animate.css配合JS的用法和讲解 ...
CSS文章整理
CSS Module CSS Modules 详解及 React 中实践CSS Modules 用法教程
Css 中括号 [ ] 的用法
Css 中括号 [ ] 的用法
【iOS开发】Alamofire框架的使用二 —— 高级用法
【iOS开发】Alamofire框架的使用二 —— 高级用法这边文章介绍的是Alamofire框架的高级用法，如...
Sass高级用法(2)
上篇文章我们介绍了Sass的日常使用方法，今天我们来介绍Sass的高级用法，这将会颠覆你对写css的印象。条件语...
css文件引入：link @import
import用法： @import "style.css";@import url("style.css"); ...