怎样运用CSS完成背景图象通明【html5教程】,图像透明,CSS

CSS完成背景图象通明须要用到的属性是opacity属性，然则在有笔墨的情况下，为了防备笔墨通明我们须要将元素离开。

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

结果以下：

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

结果以下：