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 red着色，你可以应用一个过滤器并移动它的色调：

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 2

只添加css删除内联样式..它有hogj sprvificity。

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

替换它：

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

使用

<div class="flex_cell" >

修改：

如果您无法删除内联样式，请添加！important

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

Answer 3

在css中，内联样式将比连接样式更高级联。您只需将悬停覆盖标记为！important，以使其优先于您的内联样式。

div.flex_cell:hover {
  background-image: url(img/image.jpg) !important;
}

示例：http://codepen.io/anon/pen/bNRNLy

或者，除非必要，否则最好避免内联。

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

3 个答案: