html图片怎么弄透明背景,如何使用CSS实现背景图像透明

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

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

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

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

蒲公英

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

}

效果如下：