欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  CSS中实现背景图像透明的属性是opacity属性,但是,如果你使用它来创建带有文本的内容的话,你就会发现文本内容也会随着透明。
 
  现在,我们先来编写一个只是背景图像透明的CSS。
 
  首先,我们来看一下HTML代码
 
  <divclass="content">
 
  <divclass="bg"></div>
 
  <p>蒲公英</p>
 
  </div>
 
  .bg是一个空div,“蒲公英”写在它之外。
 
  也就是说,下面将利用position属性将“蒲公英”放在图像的上面,我们来看具体的代码实例
 
  首先,给出相对位置(position:relative;)到.content。
 
  为了更容易理解背景透明,我们先给一个黑色的背景
 
  .content{
 
  width:450px;
 
  height:300px;
 
  background:#000;
 
  position:relative;/*相对位置*/
 
  }
 
  p{
 
  color:#fff;
 
  font-weight:bold;
 
  text-align:center;
 
  }
 
  效果如下:
 
  2345截图20181128105823.png
 
  接下来,我们来设置.bg
 
  将width和height设置为100%并将position设置为绝对位置放在左上(left:0;top:0;)。
 
  .bg{
 
  width:100%;
 
  height:100%;
 
  position:absolute;
 
  top:0;
 
  left:0;
 
  background:url(img/pugongying.jpg);
 
  background-size:cover;
 
  opacity:0.5;
 
  }

背景图像透明




本文转载自中文网

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c56480.shtml