CSS怎么实现背景图像透明

这篇文章主要为大家展示了“CSS怎么实现背景图像透明”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“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;

　　}

　　接下来，我们来设置.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;

　　}

以上是“CSS怎么实现背景图像透明”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！