Question

当我悬停时，我的图像不透明，一切都很好。但是出现的文字太透明，几乎看不到。如何解决？

<div class="projects">
    <a href="#" target="_blank">
        <img src="img/task_proj.jpg">
        <span class="overlay">Task Manager</span>
    </a>
</div>

http://jsfiddle.net/bfNSW/

这是js

Answer 1

您只需要使图像半透明

http://jsfiddle.net/bfNSW/2/

删除

.projects a:hover{
    opacity: 0.2;
    -webkit-transition: opacity 0.15s ease;
    -o-transition: opacity 0.15s ease;
    transition: opacity 0.15s ease;
}

添加

.projects a:hover img {
    opacity: 0.2;
    -webkit-transition: opacity 0.15s ease;
    -o-transition: opacity 0.15s ease;
    transition: opacity 0.15s ease;
}

如果将不透明度放在锚点上，那么它将影响锚点中的所有内容。在您的情况下，您只需要图像是半透明的，因此只需定位图像而不是整个锚

Answer 2

这是因为您正在更改<a>的不透明度。由于<span>位于<a>内，因此其不透明度会受到影响。尝试更改<img>。

的不透明度

.projects a:hover img {
    opacity: 0.2;
    -webkit-transition: opacity 0.15s ease;
    -o-transition: opacity 0.15s ease;
    transition: opacity 0.15s ease;
}

Here's an example

Answer 3

当文本存在于透明元素内时，文本本身也变为透明。要解决此问题，请将文本分区放在已应用透明度的元素之外，然后使用适当的样式在分区上放置文本。

通常使用样式

完成

position:relative; bottom: 10px; //or an height to which you want to raise it relative to the parent element.

用不透明度盘旋时图像上的文字

3 个答案:

通常使用样式