Question

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

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

此代码的问题在于标题也是半透明的。我想知道如何更改它，因此标题是不透明的。

任何想法都将不胜感激

Answer 1

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

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

然后

opacity: 1;

div中的

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

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

Answer 3

使用background-color: rgba()代替opacity

的透明背景

这是我刚刚制作的一个jsfiddle，它会告诉你：http://jsfiddle.net/aVz8E/

Answer 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给人的印象是透明的，尽管它不是。

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

4 个答案: