手揣网教程:绿色安全纯净官方版,体验当今速度最快的浏览器!

如何使用CSS完成背景图像透明

时间:2023/7/23作者:未知来源:手揣网教程人气:

[摘要]CSS实现背景图像透明需要用到的属性是opacity属性,但是在有文字的情况下,为了防止文字透明我们需要将元素分开。CSS中实现背景图像透明的属性是opacity属性,但是,如果你使用它来创建带有文...
CSS实现背景图像透明需要用到的属性是opacity属性,但是在有文字的情况下,为了防止文字透明我们需要将元素分开。

如何使用CSS完成背景图像透明

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;
}

效果如下:

如何使用CSS完成背景图像透明

接下来,我们来设置.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完成背景图像透明

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

所以,比起固定在绝对位置的背景图像,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;
}

效果如下:

如何使用CSS完成背景图像透明

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


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:如何运用CSS完成背景图像透明




Copyright © 2012-2018 手揣网教程(http://www.shouchuai.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版