Question

我有以下代码：

CSS：

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

HTML：

'down.png'

div是具有透明背景的图像。我想要做的是让背景的颜色发生变化，同时仍然将图像保持在颜色的前面。

前面的代码几乎完成所有操作，只是当我将鼠标悬停在<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd" default-lazy-init="true"> <bean id="validatorServiceBean" class="com.xyz.validator.service.impl.ValidatorServiceBean">  </bean>  <bean class="org.springframework.remoting.rmi.RmiServiceExporter">  <property name="serviceName" value="ValidatorServiceBean"/>  <property name="service" ref="validatorServiceBean"/>  <property name="serviceInterface" value="com.xyz.validator.service.ValidatorService"/>  <property name="registryPort" value="1009"/> </bean> </beans>上时，没有任何反应。

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

以下是发生问题的jsfiddle链接： https://jsfiddle.net/sdsze2fv/

Answer 1

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

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内联。内联样式始终覆盖在css文件中设置的样式，除非您已将!important添加到样式中。

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

＆＃13;

div.testy {
  border:1px solid black;
}

div.testy:hover {
  background-color:red;
}

＆＃13;

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

＆＃13;

Answer 3

您设置内联的背景将覆盖css规则中的背景。内联样式总是覆盖任何东西（除了重要的东西）。如果您删除内联并将其放入规则中，它将起作用。或者此

中包含其他方法

JSFIDDLE

在这里我们说'嘿，我希望bkgrnd图像是这个'...不是背景...因为背景包括图像，颜色，重复等所有内容。它的简写。所以你在技术上也设置了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;
}

背景颜色变化悬停与背景大小

3 个答案: