Question

我有6个按钮，分别对应于Github，StackOverflow，SoloLearn，Facebook，Instagram和Google+。
除了背景图片，其他样式都相同。
仅GitHub，StackOverflow和SoloLearn图像用作按钮的背景，其他三个则不起作用。

这是按钮的样式：

.github{
    background-image: url('github.png');
    background-color: #000016;
}
.stackoverflow{
    background-image: url('stackoverflow.png');
    background-color: #ffffff;
}
.sololearn{
    background-image: url('sololearn.png');
    background-color: #fffeee;
}
.facebook{
    background-image: url('facebook.png');
    background: #3b5998;
}
.instagram{
    background-image: url('instagram.png');
    background: #e1306c;
}
.google{
    background-image: url('google.png');
    background: #dd4b39;
}
.github, .stackoverflow, .sololearn, .facebook, .instagram, .google{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    text-decoration: none;
    border: none;
    width: 32px;
    height: 32px;
    color: white;
    margin-top: -2px;
}
.github:hover, .stackoverflow:hover, .sololearn:hover, .facebook:hover, .instagram:hover, .google:hover{
    opacity: 0.7;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
}

在代码段中，图像来自我的Pinterest图像的链接，但是在原始代码中，图像均为PNG，并且与“ index.html”位于同一文件夹中，但仅前三个起作用。 > 注意：我不想使用任何库来添加社交媒体图标。

这是所有代码：

body{
	background-color: black;
}
.icons{
	position: fixed;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
}

/* The problem is in this 6 classes, 3 work, 3 don't */
.github{
	background-image: url('https://i.pinimg.com/236x/17/54/08/1754081a6e8a0fb06bca25a6c4fb8e53.jpg');
	background-color: #000016;
}
.stackoverflow{
	background-image: url('https://i.pinimg.com/236x/45/08/1f/45081f65af75c20862452b64d03ebbef.jpg');
	background-color: #ffffff;
}
.sololearn{
	background-image: url('https://i.pinimg.com/236x/e9/5e/d6/e95ed6e5221c358cddd3aa43cfcc01d1.jpg');
	background-color: #fffeee;
}
.facebook{
	background-image: url('https://i.pinimg.com/236x/3c/86/dd/3c86dd4de8cfd2201fcc365c3ed4a9b2.jpg');
    background: #3b5998;
}
.instagram{
	background-image: url('https://i.pinimg.com/236x/4e/28/a9/4e28a95b1f16ccc371707deb4c2e408f.jpg');
    background: #e1306c;
}
.google{
	background-image: url('https://i.pinimg.com/236x/fb/29/40/fb2940721465135b01583ff6f3b668ac.jpg');
    background: #dd4b39;
}
.github, .stackoverflow, .sololearn, .facebook, .instagram, .google{
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
	text-decoration: none;
	border: none;
	width: 32px;
	height: 32px;
    color: white;
    margin-top: -2px;
}
.github:hover, .stackoverflow:hover, .sololearn:hover, .facebook:hover, .instagram:hover, .google:hover{
	opacity: 0.7;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
}

<html>
<head>
	<meta charset="utf-8">
	<title>btns</title>
</head>
<body>
<div class="icons">
	<!-- All the 6 buttons are equal except for the class but their classes are also the same except the bg image -->
	<form action="https://github.com/AfonsoHipolito" target="_blank">
		<button type='submit' title='GitHub' class="github"></button>
	</form>
	<form action="https://stackoverflow.com/users/11216714/afonso-hip%c3%b3lito" target="_blank">
		<button type="submit" title="StackOverflow" class="stackoverflow"></button>
	</form>
	<form action="https://www.sololearn.com/Profile/9031845" target="_blank">
		<button type='submit' title='Sololearn' class="sololearn"></button>
	</form>
	<form action="https://www.facebook.com/afonso.hipolito.984" target="_blank">
		<button type='submit' title='Facebook' class="facebook"></button>
	</form>
	<form action="https://www.instagram.com/_afonsohipolito_/" target="_blank">
		<button type='submit' title='Instagram' class="instagram"></button>
	</form>
	<form action="https://www.google.com" target="_blank">
		<button type='submit' title='Google' class="google"></button>
	</form>
</div>
</body>
</html>

Answer 1

您使用的是background: #...而不是background-color: #...

这意味着您覆盖了上一行所写的背景。因此，请将此行移到顶部或使用后缀-color进行更改。

按钮上的背景图片不起作用

1 个答案: