如何在CSS上悬停黑暗图像背景？

Question

如何在不使用其他图像的情况下在悬停时使图像背景变暗？

Answer 1

对于年轻的浏览器，您可以使用混合模式： http://codepen.io/anon/pen/waGoEd

html {
  background:url(http://lorempixel.com/300/300) rgba(0,0,0,0.5);
}
html:hover {
  background-blend-mode:darken;
}

此处使用rgba（）颜色，您可以使用任何颜色使图像变暗或着色。

下一个

html {
  background:url(http://lorempixel.com/300/300) rgba(100,0,0,0.5);
}
html:hover {
  background-blend-mode:darken;
}

渐变也可以应用。

Answer 2

在纯css中悬停时，不能使颜色变暗。 你可以这样做：

body {
    background-color: #efefef;
}
body:hover {
    background-color: #cccccc;
}

为了自动使颜色变暗，您可以使用较少的颜色，例如：

@grey: #efefef
@grey-darker: darken(@grey, 10%);

然后在样式定义中：

body {
    background-color: @grey;
    &:hover {
        background-color: @grey-darker;
    }
}

Answer 3

使用透明的PNG图像，然后（使用CSS）添加：hover pseudo到img标签，并根据需要定义背景颜色。

img:hover {
background-color: black;
}