Question

我有一个带背景图片的div元素。当您将鼠标悬停在div元素上时，我将在div元素中显示一些文本。我想在不改变文本内部不透明度的情况下将div元素的亮度降低50％。我发现做类似事情的唯一方法就是像这样使用rgba函数：

rgba（0,0,0,0.5）;

然而，这仅适用于颜色，我想知道是否有办法实现相同的效果而不将文本带到div之外。我是HTML / CSS的新手，所以我希望你们能帮助我。谢谢！

Answer 1

DEMO

您可以使用:after伪来保留背景图片并使用不透明度而不是主要元素。

<强> HTML：

<div class="have-img">LOREM IPSUM DOLOR</div>

<强> CSS：

.have-img{
    position: relative;
    font-weight: bold;
    font-family: arial;
    font-size: 15px;
    padding: 100px 20px;
    text-align: center;
}
.have-img:after{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    background: url('http://lorempixel.com/1000/200/') no-repeat center center;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.2;
}

需要帮助改变div元素与背景图像的不透明度而不改变文本的不透明度？

1 个答案:

DEMO