将鼠标悬停在图像上时显示带有半透明颜色叠加的标题答案

【问题标题】：Show a caption with a semi-transparent color overlay when hovering over an image将鼠标悬停在图像上时显示带有半透明颜色叠加的标题
【发布时间】：2014-08-27 08:08:12
【问题描述】：

我正在使用以下代码在将鼠标悬停在图像上时显示带有半透明红色叠加层的标题：

HTML：

<a href="http://www.domain.com/">
    <div class="thumb">
        <img src="http://www.domain.com/thumbnail.jpg" width="100" height="100" alt="" />
        <div>
            <span>Caption</span>
        </div>
    </div>
</a>

CSS：

.thumb {
    position: relative;
}
.thumb div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fe0000;
    color: #fff;
    opacity: 0;
    transition: opacity 0.5s;
}
.thumb img {
    display: block;
}
.thumb div span {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 30px;
}

.thumb:hover div {
    opacity: 0.3;
}

这段代码的问题是标题也是半透明的。我想知道如何更改它以使标题不透明。

任何想法将不胜感激

【问题讨论】：

删除 .thumb:hover div { opacity: 0.3; }
但是，如果我删除那条线，背景覆盖也将是不透明的。我希望叠加层是半透明的，而标题是不透明的。

标签： html css hover opacity

【解决方案1】：

您可以设置所有 div 的不透明度 0.3，而不是设置

background: rgba(255,0,0,0.3);

然后

opacity: 1;

在 div 中

像这样：http://jsfiddle.net/EUUMX/

【讨论】：

这就是我要找的。谢谢！

【解决方案2】：

你需要使用 background: rgba() 而不是 #fe0000;在后台，您将不透明度设置为 1。这是您修改的 CSS。

CSS：

.thumb {
    position: relative;
}
.thumb div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255,0,0,0.3);
    color: #fff;
    opacity: 0;
    transition: opacity 0.5s;
}
.thumb img {
    display: block;
}
.thumb div span {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 30px;
}

.thumb:hover div {
    opacity: 1;
}

【讨论】：

【解决方案3】：

用background-color: rgba() 代替opacity 使用透明背景

这是我刚刚制作的一个 jsfiddle，它将向您展示：http://jsfiddle.net/aVz8E/

【讨论】：

【解决方案4】：

我在这里给你解决方案： http://jsfiddle.net/fJ7gs/

<a href="http://www.domain.com/">
    <div class="thumb">
        <img src="http://www.domain.com/thumbnail.jpg" width="100" height="100" alt="" />
        <div class="hover">
            <span class="overlay"></span>
            <span class="caption">Caption</span>
        </div>
    </div>
</a>

.thumb {
    position: relative;
}
.thumb .hover {
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    color: #fff;
    opacity: 0;
    transition: opacity 0.5s;
}
.thumb img {
    display: block;
}
.thumb .caption {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 30px;
}

.thumb:hover .hover {
    opacity:1;
}

.thumb .overlay {
    display:block;
    height:100%;
    background: #fe0000;
    opacity: 0;
    transition: opacity 0.5s;
}

.thumb:hover .overlay {
    opacity: 0.3;
}

我尝试改变颜色：#000;可以肯定的是，因为 #fff 给人的印象是透明的，尽管它不是。

【讨论】：