css - 悬停不透明度 CSS 最小图像尺寸

Question

我正在使用下面的 CSS 为图像创建悬停不透明度。我希望能够设置一个最小限度，这样只有特定大小的图像才具有不透明度。

例。我的 225x225 图像正确呈现不透明度，但我的大标题图像也是如此。我只希望 225x225 及以下的图像在悬停时不透明，而不是全部。

img {
opacity: 1;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}

 img:hover {
opacity: .8;
filter: alpha(opacity=100);
 /* For IE8 and earlier */
}

感谢您的帮助!

Answer 1

您不能在单个元素上使用媒体查询，因此您只能在此处使用 JavaScript。为此，正在制定新的 CSS 规则，但此时使用它们并不可靠。

您可以做的是使用 jQuery 为 img 标签添加一个监听器，并在页面加载时检查 CSS。如果图像的大小不符合您对不透明度级别的要求，您可以限制它。