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;

 

　　}





本文转载自中文网