CSS 边框半径和滤镜灰度无法协同工作
CSS Border radius and filter grayscale not working together
我有一些 css 同时使用边界半径和灰度滤镜的地方。我希望边框半径始终在原位,但灰度在悬停时消失。
在我添加灰度之前,边框半径工作正常,然后它停止工作,只将图像显示为正方形。在悬停时(当过滤器被移除时) border-radius 再次启动。有谁知道我错过了什么?
我搜索过但找不到答案。
.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%);
}
我附上了悬停和非悬停状态的图像以供参考。
您可以使用 div 环绕图像并在其上放置 overflow: hidden;
并为 div 提供相同的宽度和高度。然后放 border-radius: 50%;在 div 上。仅在图像上应用灰度。最后改img做,
div:hover .esg-entry-media{
filter: grayscale(0)
}
关于包装div做,
div:hover {
border: 10px solid *coloryouwant*
}
哪个浏览器?适合我(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%);
}
<img src="http://placekitten.com/200/300" class="esg-entry-media" />
我有一些 css 同时使用边界半径和灰度滤镜的地方。我希望边框半径始终在原位,但灰度在悬停时消失。
在我添加灰度之前,边框半径工作正常,然后它停止工作,只将图像显示为正方形。在悬停时(当过滤器被移除时) border-radius 再次启动。有谁知道我错过了什么?
我搜索过但找不到答案。
.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%);
}
我附上了悬停和非悬停状态的图像以供参考。
您可以使用 div 环绕图像并在其上放置 overflow: hidden;
并为 div 提供相同的宽度和高度。然后放 border-radius: 50%;在 div 上。仅在图像上应用灰度。最后改img做,
div:hover .esg-entry-media{
filter: grayscale(0)
}
关于包装div做,
div:hover {
border: 10px solid *coloryouwant*
}
哪个浏览器?适合我(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%);
}
<img src="http://placekitten.com/200/300" class="esg-entry-media" />