Question

我知道有人问过类似的问题，但我找不到适合自己问题的答案。所以我要求公众帮助解决我的问题。我有一个img文件夹，我有一个search.png图片。它是一个搜索图标，我尝试将其用于我的YouTube搜索API页面。所以我遇到的问题是当我把search.png放到我的背景中时：url（../ img / search.png）它根本没有出现，而是它的空方框。我将在下面附上我的代码。请不要不喜欢我的问题我真的需要回答。

*{
	padding:0;
	margin:0;
}

body{
	font-family:"Segoue",sans-serif;
	line-height:2em;
	color:#000000;
	background:#e1e1e1 url(../img/red.jpg) fixed;
	background-repeat: no-repeat;
	/*background-position: cover;*/
	background-size: cover;
	font-size:13px;
}

a{
	color:#333;
	text-decoration:none;
}

#container{
	/*height: 100px;*/
	width:740px;
	background:#f4f4f4;
	opacity: 0.9;
	margin:auto;
	margin-top: 300px;
	/*border: 2px solid black;*/
}

.clearfix{
	clear:both;
}

header{
	padding:30px 20px;
	background:#f4f4f4;
}

header h1{
	color:#001373;
	margin-bottom:5px;
}

header span{
	color:#000000;
	border: 1px solid black;
	border-radius: 5%;
	background-color: #007EFF;
	padding: 8px;
}

section{
	padding:30px 20px 20px 20px;
}

footer{
	padding:20px;
	background:#f4f4f4;
	text-align:center;
}

#search{
	display: block;
	margin-bottom: 15px;
}

.fieldcontainer{
	display: block;
	position: relative;
	width: 90%;
	margin: 0 auto;
}

#search-btn{
	position: absolute;
	right: 360px;
	top: 5px;
	height: 32px;
	width: 32px;
	border: 0;
	cursor: pointer;
	zoom: 1;
	filter: alpha(opacity=65);
	opacity: 0.65;
	background-image: transparent url(../img/search.png) top-left no-repeat;
}

#search-btn:hover{
	filter: alpha(opacity=90);
	opacity: 0.9;
}

.search-field{
	box-sizing: border-box;
	display: block;
	width: 45%;
	padding: 7px 17px;
	padding-right: 43px;
	background-color: #BBB3F7;
	color: #75026C;
	font-weight: bolder; 
	border-radius: 1px solid black;
	font-size: 1.6em;
	border-color: #00B5ED;
	border-radius: 1px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	cursor: default;

}

		<script src="js/script.js"></script>
	</head>
	<body>
		<div id="container">
			<header>
				<h1>Search<span>Vidz</span></h1>
				<p>Search all Youtube videos</p>
			</header>
			<section>
				<form id="search-form" name="search-form" onsubmit="return search()">
					<div class="fieldcontainer">
						<input type="search" id="query" class="search-field" placeholder="Search YouTube...">
						<input type="submit" name="search-btn" id="search-btn" value="">
					</div>
				</form>
				
				<ul id="results"></ul>
				<div id="buttons"></div>
			</section>
			<footer>
				<p>Copyright &copy; 2014, All Rights Reserved</p>
			</footer>
		</div>
	</body>
</html>

Answer 1

检查图片文件扩展名！

Answer 2

您在代码中编写“search.jpg”。更改为“search.png”

Answer 3

问题是语法，您有background-image: transparent url(../img/search.png) top-left no-repeat;，但所有属性都应分配给速记background:，background-image只需要图片（网址）。此外，位置不应该是“左上角”而是“左上角”（两个单词）

该行的正确版本应为：

    background: transparent url(../img/search.png) top left no-repeat;

希望这有帮助

background-image：无法正常工作

3 个答案: