实现DIV半透明演示

开发工具与关键技术：DW 前端
作者：陈芝番
撰写时间：2019.8.1
实现半透明效果演示，给定三个DIV，第一个设置最大的宽高，第二个是该图片宽高，第三个设置背景色，适当的宽高。还有Class权重，
以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值： /权重为1/

   div{
   }
   /*权重为10*/
   .class1{
   }
   /*权重为100*/
   #id1{
   }
   /*权重为100+1=101*/
   #id1 div{
   }
   /*权重为10+1=11*/
   .class1 div{
   }
   /*权重为10+10+1=21*/
   .class1 .class2 div{
   } 
   如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现。
   Html部分：内容(content)
   <div class="div-a"> 
       <div class="div-b"></div> 
       <div class="div-b-content">实现DIV半透明演示</div>
   </div>

CSS部分：

   Background：设置背景图
   Background-size:设置背景图宽高
   Relative:相对定位
   Absolute：绝对定位
   Text-align:文本居中
   <style> 
   .div-a {
       background: url(./images/div-a-bg.jpg) no-repeat;
       background-size: 230px 136px;
       width: 230px;
       height: 136px;
       padding: 10px;
       position: relative;
   }
   .div-b {
       background: #000;
       width: 200px;
       height: 100px;
       filter: alpha(Opacity=60);
       -moz-opacity: 0.6;
       opacity: 0.6;
       position: absolute;
       top: 10px;
       left: 10px;
   } 
   .div-b-content {
       width: 200px;
       height: 100px;
       color: #F00;
       position: absolute;
       top: 10px;
       left: 10px;
       text-align: center;
       padding-top: 5px;
   }

/这里对CSS代码换行是为了让代码在此我要中显示完整，换行后CSS效果不受影响 */ 实现的效果图如下：

结语：DIV半透明效果演示，主要运用了Class权重的规则，.Class1,.Class1 div,.Class1.Class2
div权重大小不一样，如果权重相同，最后定义的样式也会起作用的，但是应该避免这种情况发生。