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

Posted 2023-03-06

【中文标题】在任何背景上突出显示图像（悬停时）

【英文标题】：Highlight images (on hover) on any background

【发布时间】：2014-06-21 13:40:01

【问题描述】：

当鼠标指针悬停在某些图像上时，希望点亮某些图像（增加亮度）是很常见的。

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

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

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

b.无需添加白色背景或完全不使用不透明度即可实现相同的效果

【问题讨论】：

(a) 您可以使用绝对定位的伪元素来做到这一点，并且 (b) 在不添加背景的情况下，您将不得不使用 filter 来操作图像，尽管仅支持到目前为止基于 WebKit 的浏览器。

【参考方案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/

【参考方案2】：

image:hover  filter: brightness(50%); 

【讨论】：

看起来这只适用于基于 webkit 的浏览器，而不是跨浏览器解决方案。

是的，如果 Firefox 和 IE 支持，这将是一个很棒的解决方案。还是谢谢你

哎呀，忘记了。我的错。

【参考方案3】：

将此类添加到任何图像

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

【参考方案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 属性，框将始终具有相同的大小

【讨论】：

谢谢，但很遗憾我需要遵循网站的主题规范