你如何只显示背景的一部分是css？
Posted
技术标签:
【中文标题】你如何只显示背景的一部分是css？【英文标题】：How do you only display part of a background is css? 【发布时间】：2020-03-22 12:14:57 【问题描述】：作为 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>【问题讨论】：
相关以获得关于背景位置的所有信息：***.com/q/51731106/8620333 【参考方案1】：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 更改为您需要的任何值。
【讨论】：
如果您能通过简短的解释指出您所做的更改，那就太好了。 好的，如果我想要它在中间和顶部之间呢？关于这里：imgur.com/a/pT9JloF 在行尾播放百分比然后，答案已编辑，检查更新【参考方案2】：首先，我会将您的图片裁剪到您想要的高度。所以在 3000px 时，你应该有一个具有一定高度的尺寸。然后，您应该使用 CSS 媒体查询来更改该背景图像，一旦它到达桌面，例如 2500 像素。然后，再次在 900 像素左右的平板电脑上。
在上面的答案中，他们对职位的看法是正确的：
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/cs-s-ref/pr_background-position.asp
注意：如果您像我上面建议的那样裁剪 3 种尺寸，您甚至可能不必使用位置设置。
额外说明：这是 CSS 媒体查询的链接： https://www.w3schools.com/css/css_rwd_mediaqueries.asp
【讨论】：
【参考方案3】：你可以通过给#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>【讨论】：
以上是关于你如何只显示背景的一部分是css？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 CSS 的其余部分同时显示在 CSS 中加载的背景图像