如何使用CSS实现背景图像透明-木庄网络博客

2022-03-27 22:48:01 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者不言，侵删。

CSS实现背景图像透明需要用到的属性是opacity属性，但是在有文字的情况下，为了防止文字透明我们需要将元素分开。

未标题-3.jpg

CSS中实现背景图像透明的属性是opacity属性，但是，如果你使用它来创建带有文本的内容的话，你就会发现文本内容也会随着透明。

现在，我们先来编写一个只是背景图像透明的CSS。

首先，我们来看一下HTML代码

<div class="content">
    <div class="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;）。

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 如何使用CSS实现背景图像透明

如何使用CSS实现背景图像透明

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论