jquery - css hover div，在内联样式背景图像上叠加透明图像

Question

我有一个 div，它有一个背景图像，使用 jquery 作为内联样式添加到它。

<div class="flex_cell" style="background-image: url(img/image.jpg);">

我需要做的是在悬停 div 时在现有背景图像之上添加另一个背景图像。新的背景图像将是红色的 50% 不透明 png。

div.flex_cell:hover { background-image: url(img/overlay.png); }

我怎样才能做到这一点？

Answer 1

您可以使用 :after 在悬停时添加一个伪元素，它将包含叠加 png，如果您需要使用 css 将 png 着色为红色，您可以应用过滤器并改变其色调:

.flex_cell{
    position:relative;
    display:block;
    width:500px;
    height:500px;
}
.flex_cell:hover:after{
    content:'';
    position:absolute;
    display:block;
    width:500px;
    height:500px;
    background: url(http://www.granini.com/data/images/fruit_images/full/banana.png) !important;
    opacity:0.7;
	filter: hue-rotate(310deg);
	-moz-filter: hue-rotate(310deg);
	-webkit-filter: hue-rotate(310deg);
}

<div class="flex_cell" style="background-image: url(http://foodmatters.tv/images/bananas.jpg);">