Question

＆＃13;

#blue:hover,#green:hover,#Reset:hover
		{
		background: #00ff00;
		background-image: -webkit-linear-gradient(top, #00ff00, #3498db);
		background-image: -moz-linear-gradient(top, #00ff00, #3498db);
		background-image: -ms-linear-gradient(top, #00ff00, #3498db);
		background-image: -o-linear-gradient(top, #00ff00, #3498db);
		background-image: linear-gradient(to bottom, #00ff00, #3498db);
		text-decoration: none;
    
		
		}
		
		
		#blue{
			background: lightblue url(http://www.veryicon.com/icon/png/Application/Glassy%20Software/WLM.png) no-repeat 10px center;
			height: 32px;
			padding-left: 36px;
    background-size:contain;
			<!---webkit-border-radius: 25;
			-moz-border-radius: 25;!-->
			border-radius: 20px;
			font-family: Arial;
			color: blue;
			font-size: 15px;
			border: solid black 2px;
			text-decoration: none;
			}
			
		#green{
			background: lightgreen url(http://www.veryicon.com/icon/png/Application/Glassy%20Software/WLM.png) no-repeat 5px center;
    background-size:contain;
			height: 32px;
			padding-left: 36px;
			<!--webkit-border-radius: 20;
			-moz-border-radius: 20; !-->
			border-radius: 20px;
			font-family: Arial;
			color: blue;
			font-size: 15px;
			border: solid black 2px;
			text-decoration: none;
			
			
			}
			#Reset{
			background: orange url(http://www.veryicon.com/icon/png/Application/Glassy%20Software/WLM.png) no-repeat 5px center;
    background-size:contain;
			height: 32px;
			padding-left: 50px;
			<!---webkit-border-radius: 20;
			-moz-border-radius: 20;!-->
			border-radius: 20px;
			font-family: Arial;
			color: black;
			font-size: 15px;
			border: solid black 2px;
			text-decoration: none;
			
			}

＆＃13;

<div class= "buttons">
	<button class="btnExample" id="Reset" type="submit" value="Submit" onclick="Reset()"/>ALL</button>
	<button class="btnExample" id="blue" type="submit" value="Submit" onclick="Button1()"/>Button1</button>
	<button class="btnExample" id="blue" type="submit" value="Submit" onclick="Button1"/>Button1</button>
	<button class="btnExample" id="blue" type="submit" value="Submit" onclick="Button1"/>Button1</button>
	<!--<button class="btnExample" type="submit" value="Submit" onclick="SWSDCuPf()"/>SW SD CuPf</button>-->
	<button class="btnExample" id="blue" type="submit" value="Submit" onclick="Button1"/>Button1</button>
	<!--<button class="btnExample" type="submit" value="Submit" onclick="qchamp()"/>Q-Champ</button>-->
	<button class="btnExample" id="green" type="submit" value="Submit" onclick="Button1"/>Button1</button>
	<button class="btnExample" id="green" type="submit" value="Submit" onclick="Button1"/>Button1</button>
	<button class="btnExample" id="green" type="submit" value="Submit" onclick="Button1"/>Button1</button>

＆＃13;

悬停的主要问题我无法在按钮中看到我的图像。没有什么必须在Html中更改我只需要在CSS部分需要更改。有没有办法通过使用CSS3来做到这一点。图像首先是徽标，显示没有任何问题，但当我悬停徽标时，隐藏。

Answer 1

首先，不要使用多个相同的id，它是无效的标记，而是使用class。

对于你的问题，你可以使用不同的方法，这里有一个使用伪类。您的徽标已放置在那里，因此当您更改button的背景时，徽标不会受到影响/覆盖：）

button {
    position: relative;
    height: 32px;
    padding: 0 50px;
    background-size: contain;
    color: blue;
    font-size: 15px;
    border: none;
    background-color: lightblue;
}
button:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: inherit;
    width: 50px;
    background: url(http://www.veryicon.com/icon/png/Application/Glassy%20Software/WLM.png) no-repeat center center;
    background-size: contain;
}
button:hover {
    background: #00ff00;
    background-image: -webkit-linear-gradient(top, #00ff00, #3498db);
    background-image: linear-gradient(to bottom, #00ff00, #3498db);
}

<button>I am a button</button>

另外，您可能希望更多地阅读CSS;）

必须使用CSS查看背景徽标

1 个答案: