悬停时背景颜色随背景大小变化

Question

我有以下代码：

CSS:

<style>
    div.testy {
        border:1px solid black;
    }

    div.testy:hover {
        background-color:red;
    }
</style>

HTML:

<div class="testy" style="height:100px; 
background: url('down.png') no-repeat; background-size:contain;">
    aa
</div>

'down.png' 是具有透明背景的图像。我想要做的是改变背景的颜色，同时仍然保持图像在颜色前面。

前面的代码几乎一切正常，除了当我将鼠标悬停在 div 上时，没有任何反应。

问题：为什么悬停和背景颜色更改不起作用？

这是发生问题的 jsfiddle link： https://jsfiddle.net/sdsze2fv/

Answer 1

问题是您正在为 "background image" 使用 background:。分别用background-color和background-image区分background image和background color。

div.testy {
        border:1px solid black;
    }

    div.testy:hover {
        background-color:red;

    }

<div class="testy" style="height:100px; 
background-image: url('http://www.w3schools.com/html/html5.gif'); 
background-size:contain;">
    aa
</div>

Answer 2

发生这种情况是因为您已经在 html 中定义了 background 内联。除非您已将 !important 添加到样式中，否则内联样式始终会覆盖 css 文件中设置的样式。

我建议您仅在内联样式中设置 background-image，然后在 CSS 文件的规则中设置 background-color。

div.testy {
  border:1px solid black;
}

div.testy:hover {
  background-color:red;
}

<div class="testy" style="height:100px; 
background-image: url('down.png'); background-repeat: no-repeat; background-size:contain;">
    aa
</div>

Answer 3

您设置的内嵌背景覆盖了 css 规则中的背景。内联样式总是会覆盖任何内容（带有 !important 的内容除外）。如果您删除内联并将其放入规则中，它将起作用。或者这个

中包含另一种方法

JSFIDDLE

这里我们说的是 'hey, i want the bkgrnd image to be this'...不是背景...因为背景包括图像、颜色、重复等所有内容。它是 shorthand。所以你在技术上也在那里设置 bkgrnd 颜色......这就是为什么它会超过你的悬停。

这是另一个选项...从内联中删除并将其放入规则中...按原样...然后它也可以工作

JSFIDDLE2

div.testy {
   border:1px solid black;
   height: 100px;
   font-size: 25px;
   color: orange;
   background:  url('https://upload.wikimedia.org/wikipedia/commons/3/3a/Gluecksklee_(transparent_background)2.png') no-repeat;
   background-size: contain;
}

div.testy:hover {
   background-color:red;
}

悬停时背景颜色随背景大小变化

background color change on hover with background-size

html

css

hover

background-color