您的位置 首页 css教程

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

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;)。

.bg{    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    background: url(img/pugongying.jpg);    background-size: cover;    opacity: 0.5;}

效果如下:

背景图像透明

实际上,字符位于透明图像下方。

所以,比起固定在绝对位置的背景图像,p的内容必须要在前面。

因此,p也可以通过给予position:absolute;给它堆叠顺序。(因为它被描述为position:absolute;,还可以使用z-index来操纵堆叠顺序。)

最后我们将文字移到中间位置

p{    width: 100%;    height: 1.5em;    color: #fff;    font-weight: bold;    text-align: center;    position: absolute;    margin: auto;    top: 0;    bottom: 0;}

效果如下:

2345截图20181128110408.png

以上就是如何使用CSS实现背景图像透明的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:如何使用CSS实现背景图像透明

文章地址:https://www.pyhw.net/40214_%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8css%e5%ae%9e%e7%8e%b0%e8%83%8c%e6%99%af%e5%9b%be%e5%83%8f%e9%80%8f%e6%98%8e.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图