Question

我正在制作一些网站并在CSS中遇到标题背景图片问题。它不会缩放到窗口大小，问题还在于图像中没有标题的文本。

我希望背景图像的全宽和高度为图像比例（在这种情况下图像为16：9），H3文本在背景中间。

段：

＆＃13;

* {
  /* outline: 1px dotted salmon; */
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  /*line-height: 1.428571429;*/
  color: #333333;
  height:100%;
  /* width: 100%; */
  box-sizing: border-box;
}

#navigacija ul {
	width: 100%;
	height: 40px;
	color: #eceff1;
	top: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#navigacija ul li {	
	float:right;
}
#navigacija ul li a {
	display: block;
	text-align: center;
	color: #000000;
	padding: 16px;
	font-size: 14pt;
	text-decoration: none;
}
#header {
	background-image: url(https://qyq2vq.bn1304.livefilestore.com/y4mO6k4nj7Bn1PdZK3MXxnxTfup6pcZ9CV1RVzElVbaZqHXGeIsWHoA8dYIGLtxGDelO5jpjDbW7viwUNjUp1ptfrIa6Gzl2mtV8gCCEqfiycIHxrC1R0nVr73m_KmhQ2pXgEjhsGtlnkGEpo928QsIRfnQSs-aM4CwxiwaEzJ-q262AQ1Cqau9q_7J1oA9OHSG_pQDOfyHhgSAUpcdz-BdCw/20170104_164033.jpg?psid=1);
	background-size: contain;
	background-repeat: no-repeat;
	line-height: auto;
	background-position: 100% 100%;

}
#header h3 {
		text-align: center;
	font-size: 16pt;
}
p.traka {
	text-align: center;
	font-size: 12pt;
	background-color: #eceff1;
	padding: 10px;
}
#zastomi {
	width: 100%;
	height: 25%;
	background-color: #29434e;
}

＆＃13;

<html>
	<head>
		<meta charset="utf-8">
		<title>index.html</title>
		<script src="https://use.fontawesome.com/e4a38023a1.js"></script>
		<link href="css/style.css" rel="stylesheet" type="text/css">
	</head>

	<body>
		<!--<div class="container">-->
			<div id="navigacija">
			<!--	<a href="/"  id="logo" title="ARKomp početna">
			  		ARKomp
				  <img src="http://www.arkomp.tk/test/content/logo.png" />
				</a>-->
				<ul style="list-style-type:none">
				  <li class="klmeni"><a href="index.html"><span class="navigacija_text">Početna</span></a></li>
				  <li class="klmeni"><a href="usluge.html"><span class="navigacija_text">Usluge</span></a></li>
				  <li class="klmeni"><a href="cenovnik.html"><span class="navigacija_text">Cenovnik</span></a></li>
				  <li class="klmeni"><a href="kontakt.html"><span class="navigacija_text">Kontakt</span></a></li>
				  <li class="klmeni"><a href="onama.html"><span class="navigacija_text">O nama</span></a></li>
				  <li class="drustvene facebook"><a href="https://www.facebook.com/arkomp034"><i class="fa fa-facebook-official" aria-hidden="true"></i><span class="navigacija_text">Facebook</span></a></li>
				  <li class="drustvene instagram"><a href="https://www.instagram.com/arkomp034"><i class="fa fa-instagram" aria-hidden="true"></i><span class="navigacija_text">Instagram</span></a></li>
				</ul>
			  </div>
			<div id="sadrzaj">
				<div id="header">
					<h1>Početna</h1>
				</div>
				<p class="traka">Zašto mi?</p>
				<div id="zastomi">
					<div class="kvadrati">
						<i class="fa fa-wrench" aria-hidden="true"></i>
						<h3>Kvalitet</h3>
						<p>Naš posao radimo predano i s ljubavlju. Pazimo na svaki detalj ne bi li udovoljili korisniku.</p>
					</div>
					<div class="kvadrati">
						<i class="fa fa-car" aria-hidden="true"></i>
						<h3>Mobilnost</h3>
						<p>Trudimo se da vam olakšamo čitav proces nudeći besplatnu uslugu dolaska na kućnu adresu.</p>
					</div>
					<div class="kvadrati">
						<i class="fa fa-money" aria-hidden="true"></i>
						<h3>Cena</h3>
						<p>U gradu nećete naći servis sa nižim cenama od naših. Pogledajte cenovnik ispod.</p>
					</div>
					<div class="kvadrati">
						<i class="fa fa-arrow-down" aria-hidden="true"></i>
						<h3>Akcije</h3>
						<p>ARKomp svake nedelje nudi još povoljnije svoje usluge u okviru Top ponude!!!</p>
					</div>
				</div>
				<p class="traka">Najnovije:</p>
				<div id="najnovije">
					<div class="boxovi">
						<h4>Top ponuda</h4>
						<p>Tokom ove nedelje na sniženju se nalazi usluga <a href="usluge/instalacija_sistema.html">instalacije sistema</a>. Nova cena je 1000 dinara.</p>
						<div>
							<i class="fa fa-hourglass-half fa-2x" aria-hidden="true"></i>
							<p>14.08.2017 - 20.08.2017</p>
						</div>
					</div>
					<div class="boxovi">
						<h4>Lorem ipsum</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet tempus ex. Vivamus scelerisque. </p>
						<div>
							<!--<i class="fa fa-hourglass-half fa-2x" aria-hidden="true"></i>
							<p>14.08.2017 - 20.08.2017</p>-->
						</div>
					</div>
					<div class="boxovi">
						<h4>Lorem ipsum</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet tempus ex. Vivamus scelerisque. </p>
						<div>
							<!--<i class="fa fa-hourglass-half fa-2x" aria-hidden="true"></i>
							<p>14.08.2017 - 20.08.2017</p>-->
						</div>
					</div>
				</div> 
				<div id="footer">
					<p>©2017 ARKomp.</p>
					<p>Sajt izrađen od <a href="http://www.arkomp.tk/">ARKomp</a></p>
				</div>
			</div>
		<!--</div>-->
	</body>
</html>

＆＃13;

Answer 1

使用background-size: cover;使其填满元素。 background-size: contain;将保持图像的比例，在您的情况下，高度仅为60px，因为它将是60px高度和一些宽度。如果这有意义吗？

#header {
    background-image: url(https://qyq2vq.bn1304.livefilestore.com/y4mO6k4nj7Bn1PdZK3MXxnxTfup6pcZ9CV1RVzElVbaZqHXGeIsWHoA8dYIGLtxGDelO5jpjDbW7viwUNjUp1ptfrIa6Gzl2mtV8gCCEqfiycIHxrC1R0nVr73m_KmhQ2pXgEjhsGtlnkGEpo928QsIRfnQSs-aM4CwxiwaEzJ-q262AQ1Cqau9q_7J1oA9OHSG_pQDOfyHhgSAUpcdz-BdCw/20170104_164033.jpg?psid=1);
    background-size: cover;
    background-repeat: no-repeat;
    line-height: auto;
    background-position: 100% 100%;
}

为什么背景图像在文本标题中没有很好的位置？

1 个答案: