[teemo][20161206][html+css]背景图片透明度

1、参考文档

http://www.w3school.com.cn/css/css_image_transparency.asp

http://www.w3school.com.cn/cssref/pr_opacity.asp

http://scripting.com/2014/03/10/opacityInCssBackgroundImages.html

2、说明

opacity是设置容器的透明度，容器中的有元素都会继承父容器的透明度

所以可以用一个特殊的div容器，装上背景图片，调个半透明，专门用于做背景；

3、demo

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>测试容器背景图片的透明度</title>
 6     <style>
 7         body{
 8             background-color: aquamarine;
 9         }
10         .father-container{
11             width: 500px;
12             height: 500px;
13             background-image: url(img/focusBig.jpg);
14             text-align: center;
15             opacity:0.4;/*背景图片透明度调节*/
16             filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
17         }
18         .son-container{
19             width: 200px;
20             height: 200px;
21             background-image: url(img/focus_05.jpg);
22             /*opacity:0.4;!*背景图片透明度调节*／*/
23         }
24     </style>
25 </head>
26 <body>
27 <div class="father-container">
28     <div class="son-container">
29         <p class="test-word">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus delectus dolor dolores
30             earum eos error esse, explicabo laboriosam maxime modi nesciunt numquam quaerat quas rem sapiente similique
31             veniam. Repellendus, temporibus.</p>
32     </div>
33 </div>
34 </body>
35 </html>

 

posted @ 2016-12-07 10:38  张庭岑  阅读(115)  评论(0)    收藏  举报