Question

我在链接的图片上使用以下CSS代码：

a img:hover {
    filter: alpha(opacity=80);
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    opacity: 0.8;
    background: #f00;
}

这个想法是当用户将鼠标悬停在图像上时，会略微用红色着色。虽然浏览器似乎忽略了“背景：＃f00;”属性。

我做错了什么？

提前致谢

Answer 1

它不会像你有图像那样工作，所以你需要有一个叠加元素，可能是div

Demo

HTML

<div class="wrap">
    <img src="http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
    <div class="overlay"></div>
</div>

CSS

.wrap {
    position: relative;
    display: inline-block;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    top: 0;
}

.wrap:hover .overlay {
    background: rgba(250, 0, 0, .1);
}

注意：您应该有一个已定位的相对容器，否则您的绝对定位div将在野外耗尽，此外，您可以移除display: inline-block;并为容器元素提供相应的高度和宽度，请查看它可以粘贴到您的图像上，也可以使用过渡效果来实现平滑效果

对于转换，您需要像这样修改类

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    top: 0;
    transition: background 1s;
    -moz-transition: background 1s;
    -webkit-transition: background 1s;
    -o-transition: background 1s;
}

Demo Transition

CSS不透明度和背景颜色

1 个答案: