初试 vue2.0——4.项目开发_背景图片与底色的设置
写在前面的话：
在实际应用中，我们常常遇到背景图片与颜色叠加效果的设计图，如以下效果的：
这个我试过：
background：URL();
background-color: rgba( );
只要 color 写在后面是可以实现的：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .wrap{ color:red; width: 300px; height: 150px; border: 1px solid red; /*加上边框方便看效果*/ margin: 2px auto 0; /*让div居中*/ display: inline-block; background: url(./1.png) no-repeat center; /*背景图不重复，并在div居中*/ } .box1{background-color: yellow;} .box2{background-color: rgba(255,255,0,0.2);} .box3{background-color: yellow; background: url(./1.png) no-repeat center;} .box4{background-color: rgba(255,255,0,0.2); background: url(./1.png) no-repeat center;} </style> <body> <div class="wrap">只加了背景图的对比</div> <div class="wrap">只加了背景图的对比</div> <div class="wrap">只加了背景图的对比</div> <div class="wrap">只加了背景图的对比</div> <div class="wrap box1">加上不透明的颜色</div> <div class="wrap box2">加上透明颜色</div> <div class="wrap box3">加上不透明的颜色再加上图片</div> <div class="wrap box4">加上透明的颜色再加上图片</div> </body> </html>
效果图：
上图表示，直接给要实现效果的容器加是可以的，当然加上 blur(10px) 也是可以的，但是如果要在该容器添加上内容，那么加了blur 的话，内容根本无法看清楚~
所以采用了教学视频中的方法（使用两层，一层填充内容并且加上背景色，另一层采用绝对定位的方式，放入图片，并设置blur值即可）：
做法：
将图片以img标签的形式放在一个div中，此div与需要设置背景图片的容器应该同样大小
然后给这个div设置：
position:absolute; top:0; left:0; //同时将那个需要设置背景图片的容器设置 position: relative;
z-index:-1; //可将图片置底
filter:blur(10px); //图片的模糊效果,具体给多少像素请参考设计稿~
over-flow: hidden; //以免这个图片的模糊扩散至其他的元素~
颜色背景的话呢，为那个容器正常设置就好了~
视频中的实例：
额，后补~
