更改悬停时图像的不透明度，但中间的文本除外

Question

这个问题已经在这里有了答案：

• 我可以仅对div的背景图像设置不透明度吗？ 8个答案

我想在悬停时更改图像的不透明度，并同时在图像的中间显示文本。

我的代码是HTML：

<div class="col-md-4 j-t">
    <div class="middle">
        <div class="text-middle">Play</div>
    </div>
</div>

CSS：

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.text-middle {
    background-color: white;
    color: black;
    font-size: 16px;
    padding: 16px 32px;
}

.j-t {
    height: 315px;
    background: url("pictures/golden_cut.jpg") center center no-repeat;
    background-size: cover;
    transition: .5s ease;
    backface-visibility: hidden; 
    opacity: 1;
}

.j-t:hover {
    opacity: 0.3;
}

.j-t:hover .middle{
    opacity: 1;
}

照原样使用时，中间的文字也会被图像的不透明度0.3覆盖。 我希望中间的文字具有不透明度1。

请帮忙。

Answer 1

不要在悬停时设置不透明度，而是使用background: rgba(0, 0, 0, 0.4)更改背景颜色background: rgba(0, 0, 0, 0.4)

Answer 2

抱歉，由于未经测试，我的代码可能会有些偏离，但是我已经处理了很多这个问题。 容器的任何子项都会受到父项的不透明性的影响。 而是将text-middle移到中部之外，并使jt列相对定位。 然后使用定位将text-middle放置在Middle的顶部（middle和text-middle将相对于父对象（jt col）进行定位。然后：：hover的不透明度只会影响.middle，而不会影响.text-middle

<div class="col-md-4 j-t">
    <div class="middle"></div>
    <div class="text-middle">Play</div>
</div>


.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.text-middle {
    position: absolute;
    top: -50%;
    background-color: white;
    color: black;
    font-size: 16px;
    padding: 16px 32px;
}

.j-t {
    position: relative;
    height: 315px;
    background: url("pictures/golden_cut.jpg") center center no-repeat;
    background-size: cover;
    transition: .5s ease;
    backface-visibility: hidden; 
    opacity: 1;
}

.j-t:hover {
    opacity: 0.3;
}

.j-t:hover .middle{
    opacity: 1;
}