Question

我只得到使用背景URL设置的一小幅图像。我可以在背景中看到图像，但就像放大图像一样。我使用了background-size：cover，将高度和宽度设置为100％，并显示：table;现在我不知道还有什么可做。谁能帮助我解决这个问题？

.intro {
	height: 100%;
	width: 100%;
	margin: auto;
	display: table;
	top: 0;
	background-size: cover;
	background:url(https://picstatio.com/download/3840x2160/c61c60/mountain-cliffs-nature-tree.jpg);
}
.intro .inner{
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	max-width: none;
}
.content {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}
.content h1 {
	font-family: "Yantramana";
	font-size: 600%;
	font-weight: 100;
	color: #E1EFE9;
	line-height: 70%;
}
.btn{
	font-family: "montserrat";
	font-size: 135%;
	font-weight: 400;
	color: #3A6168;
	text-transform: uppercase;
	text-decoration: none;
	border: solid #3A6168;
	padding: 10px 20px;
	border-radius: 9px;
	transition: all 0.7s;
}
.btn:hover {
	color: #CBDFD6;
	border: solid #CBDFD6;

}
/*--- Media Queries --*/
@media screen and (max-width: 900px) {

}
@media screen and (max-width: 768px) {

}
@media screen and (max-width: 480px) {
	
}

<head>
	<title>Full Screen Landing Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<link href="css/animate.css" rel="stylesheet"/>
	<link href="css/waypoints.css" rel="stylesheet"/>
	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
	<script src="js/waypoints.js" type="text/javascript"></script>
</head>
<body>
	<section class="intro">
		<div class="inner">
			<div class="content">
				<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
					<h1>Traveling.com</h1>
				</section>
				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
					<a class="btn" href="#">Get Started</a>
			</div>
		</div>
	</section>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Answer 1

尝试一下：

.intro {
    height: 100vh;
    width: 100%;
    background:url(https://picstatio.com/download/3840x2160/c61c60/mountain-cliffs-nature-tree.jpg)
    top center / 100% 100vh;
    display: table;
}

CSS tricks是此类资源的良好资源。

Answer 2

下面是对intro类的一些更改，这些更改可以解决该问题。我添加了100vh的最小高度。因此它涵盖了至少1个完整视口。接下来，我将height属性更改为600px，因此即使在非常小的屏幕上，图像仍位于按钮后面。此外，我将Cover属性放在url声明的后面。否则，css不知道要覆盖哪个背景图像。最后，我建议将背景位置设置为居中。因此，当图像未完全显示（裁切）时，它至少会显示图像的焦点。

.intro {
	height: 600px;
	min-height: 100vh;
	width: 100%;
	margin: auto;
	display: table;
	top: 0;
	background:url(https://picstatio.com/download/3840x2160/c61c60/mountain-cliffs-nature-tree.jpg);
	background-size: cover;
	background-position: center;
}
.intro .inner{
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	max-width: none;
}
.content {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}
.content h1 {
	font-family: "Yantramana";
	font-size: 600%;
	font-weight: 100;
	color: #E1EFE9;
	line-height: 70%;
}
.btn{
	font-family: "montserrat";
	font-size: 135%;
	font-weight: 400;
	color: #3A6168;
	text-transform: uppercase;
	text-decoration: none;
	border: solid #3A6168;
	padding: 10px 20px;
	border-radius: 9px;
	transition: all 0.7s;
}
.btn:hover {
	color: #CBDFD6;
	border: solid #CBDFD6;

}
/*--- Media Queries --*/
@media screen and (max-width: 900px) {

}
@media screen and (max-width: 768px) {

}
@media screen and (max-width: 480px) {
	
}

<head>
	<title>Full Screen Landing Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<link href="css/animate.css" rel="stylesheet"/>
	<link href="css/waypoints.css" rel="stylesheet"/>
	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
	<script src="js/waypoints.js" type="text/javascript"></script>
</head>
<body>
	<section class="intro">
		<div class="inner">
			<div class="content">
				<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
					<h1>Traveling.com</h1>
				</section>
				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
					<a class="btn" href="#">Get Started</a>
			</div>
		</div>
	</section>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

CSS URL图像未覆盖视口

2 个答案: