Question

当鼠标指针悬停在某些图像上时，通常需要点亮某些图像（增加亮度）。

我所知道的一种适用于白色背景的技术是降低悬停时的不透明度，这实际上通过让更多的白色通过来增加亮度。问题显然是它只能在白色背景下工作。

是否有任何我可以添加到我的图片中的CSS

一个。为图像添加一个白色背景，使其完全适合，以便在任何颜色背景上发生相同的点亮效果，或

湾在不添加白色背景或使用不透明度的情况下实现相同的效果

Answer 1

使用div

封装您的图像

<div class="brightness">
    <img  src="test.jpg">
</div>

并应用好的CSS：

.brightness {
    background-color: white;
    display: inline-block;

}
.brightness img:hover {
    opacity: .5;
}

小提琴：http://jsfiddle.net/5yush/

Answer 2

image:hover { filter: brightness(50%); }

Answer 3

将此类添加到任何图像

＆＃13;

.image-hover-highlight {
    -webkit-transition: all 0.50s;
    transition: all 0.50s;
    &:hover {
        border: 1px solid gray;
        filter: brightness(130%);
        -webkit-filter: brightness(130%);
        -moz-filter: brightness(130%);
        -o-filter: brightness(130%);
        -ms-filter: brightness(130%);
        -webkit-transition: all 0.50s;
        transition: all 0.50s;
    }
}

＆＃13;

Answer 4

这样的东西对你有用吗？ http://jsfiddle.net/omegaiori/teAP7/1/

为了使这个工作你必须将你的图像包装在div

    .img-cont {
    background:white;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    margin:30px auto 0;
    width:300px;
}

并将您的图片width设置为100%

您可以根据需要更改padding值，由于box-sizing属性

，该框的大小始终相同

在任何背景上突出显示图像（悬停时）

4 个答案: