你怎么只显示部分背景是css？
How do you only display part of a background is css?
作为 HTML 和 CSS 的新用户，我正在尝试让图像显示为带有文字的横幅，但我测试过的所有内容都表明这不是可以使用图像，所以我使用 css 的背景工具。但是当我试图把它做成横幅时，它只显示图像的上半部分。
Here is the image I'm trying to display
这是我目前拥有的：
一切都很好，包括图像的纵横比，但我想居中在中间一半，大致是这样的：
我需要更少的云和更多的山，如何裁剪背景图像以居中居中？
body {
background-size: cover;
background-position: center;
}
body,
html {
width: 100%;
height: 100%;
font-family: "Lato";
color: white;
margin: 0;
padding: 0;
}
h1 {
font-weight: 700;
font-size: 5em;
}
.content {
padding-top: 10%;
text-align: center;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
.headerText {
padding-top: 10%;
}
hr {
width: 400px;
border-top: 0.5px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
p {
color: blue;
}
#banner {
width: 100%;
background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
background-size: cover;
}
#banner h4 {
padding-bottom: 100px;
}
<html>
<head>
<title>Website Sample Project</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a><img src="https://via.placeholder.com/100x40"></a>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Locations</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="locations/narnia.html">Narnia</a>
<a class="dropdown-item" href="#">Neverland</a>
<a class="dropdown-item" href="#">Somehere</a>
<a class="dropdown-item" href="#">Nowhere</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</nav>
<section id="banner">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="content">
<a><img src="https://via.placeholder.com/600x160"></a>
<div class="headerText">
<h3>Sample Text</h3>
</div>
<hr>
<h4>Sample Text</h4>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
替换为：
background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center center;
更新：
在行尾更改垂直对齐的百分比：
background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
例如使用这个
no-repeat center 35%;
并将 35 更改为您需要的任何值。
首先，我会将您的图片裁剪到您想要的高度。所以在大约 3000 像素时，你应该有一个尺寸和一定的高度。然后，您应该使用 CSS 媒体查询来更改背景图像，一旦它到达桌面，如 2500px。然后，再次在 900px 左右的类似平板电脑上。
在上面的回答中，他们对职位的看法是正确的：
background: url("yourpathtoimage.jpg") center center no-repeat;
这样做是垂直居中和水平居中。然后，告诉图像不要重复。
你问的是如何让它再多一点到前 1/3。那会改变事情：
background: url("yourimagepath") 0 15% no-repeat;
“0”和“15%”分别是x和y。检查一下以获得进一步的清晰度：
https://www.w3schools.com/cssref/pr_background-position.asp
注意：如果您像我上面建议的那样裁剪出 3 种尺寸，您甚至可能不需要调整位置设置。
额外注意：这是一个 link 到 CSS 媒体查询：
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
您可以通过给定高度 #banner
来获得完整的背景图像
#banner {
width: 100%;
background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
background-size: cover;
height: 100%;
}
body {
background-size: cover;
background-position: center;
}
body,
html {
width: 100%;
height: 100%;
font-family: "Lato";
color: white;
margin: 0;
padding: 0;
}
h1 {
font-weight: 700;
font-size: 5em;
}
.content {
padding-top: 10%;
text-align: center;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
.headerText {
padding-top: 10%;
}
hr {
width: 400px;
border-top: 0.5px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
p {
color: blue;
}
#banner {
width: 100%;
background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
background-size: cover;
height: 100%;
}
#banner h4 {
padding-bottom: 100px;
}
<html>
<head>
<title>Website Sample Project</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a><img src="https://via.placeholder.com/100x40"></a>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Locations</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="locations/narnia.html">Narnia</a>
<a class="dropdown-item" href="#">Neverland</a>
<a class="dropdown-item" href="#">Somehere</a>
<a class="dropdown-item" href="#">Nowhere</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</nav>
<section id="banner">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="content">
<a><img src="https://via.placeholder.com/600x160"></a>
<div class="headerText">
<h3>Sample Text</h3>
</div>
<hr>
<h4>Sample Text</h4>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
作为 HTML 和 CSS 的新用户，我正在尝试让图像显示为带有文字的横幅，但我测试过的所有内容都表明这不是可以使用图像，所以我使用 css 的背景工具。但是当我试图把它做成横幅时，它只显示图像的上半部分。
Here is the image I'm trying to display
这是我目前拥有的：
一切都很好，包括图像的纵横比，但我想居中在中间一半，大致是这样的：
我需要更少的云和更多的山，如何裁剪背景图像以居中居中？
body {
background-size: cover;
background-position: center;
}
body,
html {
width: 100%;
height: 100%;
font-family: "Lato";
color: white;
margin: 0;
padding: 0;
}
h1 {
font-weight: 700;
font-size: 5em;
}
.content {
padding-top: 10%;
text-align: center;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
.headerText {
padding-top: 10%;
}
hr {
width: 400px;
border-top: 0.5px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
p {
color: blue;
}
#banner {
width: 100%;
background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
background-size: cover;
}
#banner h4 {
padding-bottom: 100px;
}
<html>
<head>
<title>Website Sample Project</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a><img src="https://via.placeholder.com/100x40"></a>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Locations</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="locations/narnia.html">Narnia</a>
<a class="dropdown-item" href="#">Neverland</a>
<a class="dropdown-item" href="#">Somehere</a>
<a class="dropdown-item" href="#">Nowhere</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</nav>
<section id="banner">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="content">
<a><img src="https://via.placeholder.com/600x160"></a>
<div class="headerText">
<h3>Sample Text</h3>
</div>
<hr>
<h4>Sample Text</h4>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
替换为：
background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center center;
更新：
在行尾更改垂直对齐的百分比：
background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
例如使用这个
no-repeat center 35%;
并将 35 更改为您需要的任何值。
首先，我会将您的图片裁剪到您想要的高度。所以在大约 3000 像素时，你应该有一个尺寸和一定的高度。然后，您应该使用 CSS 媒体查询来更改背景图像，一旦它到达桌面，如 2500px。然后，再次在 900px 左右的类似平板电脑上。
在上面的回答中，他们对职位的看法是正确的：
background: url("yourpathtoimage.jpg") center center no-repeat;
这样做是垂直居中和水平居中。然后，告诉图像不要重复。
你问的是如何让它再多一点到前 1/3。那会改变事情：
background: url("yourimagepath") 0 15% no-repeat;
“0”和“15%”分别是x和y。检查一下以获得进一步的清晰度：
https://www.w3schools.com/cssref/pr_background-position.asp
注意：如果您像我上面建议的那样裁剪出 3 种尺寸，您甚至可能不需要调整位置设置。
额外注意：这是一个 link 到 CSS 媒体查询： https://www.w3schools.com/css/css_rwd_mediaqueries.asp
您可以通过给定高度 #banner
#banner {
width: 100%;
background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
background-size: cover;
height: 100%;
}
body {
background-size: cover;
background-position: center;
}
body,
html {
width: 100%;
height: 100%;
font-family: "Lato";
color: white;
margin: 0;
padding: 0;
}
h1 {
font-weight: 700;
font-size: 5em;
}
.content {
padding-top: 10%;
text-align: center;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
.headerText {
padding-top: 10%;
}
hr {
width: 400px;
border-top: 0.5px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
p {
color: blue;
}
#banner {
width: 100%;
background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
background-size: cover;
height: 100%;
}
#banner h4 {
padding-bottom: 100px;
}
<html>
<head>
<title>Website Sample Project</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a><img src="https://via.placeholder.com/100x40"></a>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Locations</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="locations/narnia.html">Narnia</a>
<a class="dropdown-item" href="#">Neverland</a>
<a class="dropdown-item" href="#">Somehere</a>
<a class="dropdown-item" href="#">Nowhere</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</nav>
<section id="banner">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="content">
<a><img src="https://via.placeholder.com/600x160"></a>
<div class="headerText">
<h3>Sample Text</h3>
</div>
<hr>
<h4>Sample Text</h4>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>