欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

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

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

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 本文地址:http://itbyc.com/web/css3/19843.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1