CSS边框半径和过滤灰度不一起工作答案

【问题标题】：CSS Border radius and filter grayscale not working togetherCSS边框半径和过滤灰度不一起工作
【发布时间】：2020-12-01 06:01:24
【问题描述】：

我有一些 css 使用了边界半径和灰度过滤器。我希望边框半径一直都在适当的位置，但灰度在悬停时消失。

边界半径工作正常，直到我添加灰度，然后它停止工作，只将图像显示为正方形。在悬停时（当过滤器被移除时）边界半径再次启动。有谁知道我错过了什么？

我已搜索但找不到答案。

.esg-entry-media {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    -webkit-border-radius: 50% !important;
    border-radius: 50% !important;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.esg-entry-media:hover {
    border: solid 10px #fff !important;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

我已包含悬停和非悬停状态的图像以供参考。

【问题讨论】：

请edit您的问题添加minimal reproducible example。
悬停和非悬停怎么会有不同的图像？

标签： css grayscale css-filters border-radius

【解决方案1】：

您可以使用 div 环绕图像并在其上放置 overflow: hidden; 并赋予 div 相同的宽度和高度。然后放border-radius: 50%;在 div 上。仅在图像上应用灰度。最后把img改一下，

div:hover .esg-entry-media{
  filter: grayscale(0)
}

在包装 div 上做，

div:hover {
  border: 10px solid *coloryouwant*
}

【讨论】：

谢谢你 - 这解决了它！
一点问题都没有！祝你的项目好运。

【解决方案2】：

哪个浏览器？适合我（chrome、firefox、safari）：

.esg-entry-media {
    width: 250px;
    height: 250px;
    border: 10px solid transparent;
    border-radius: 50%;
    filter: grayscale(100%);
}

.esg-entry-media:hover {
    border-color: #a00;
    filter: grayscale(0%);
}

&lt;img src="http://placekitten.com/200/300" class="esg-entry-media" /&gt;

【讨论】：