您如何仅显示部分背景的CSS？

Question

作为HTML和CSS的新用户，我正在尝试将图像显示为带有文本的横幅，但是我已经测试过的所有内容都说图像是不可能的，所以我使用的是CSS背景工具。但是，当我尝试将其设置为横幅时，它仅显示图像的上半部分。

这是我目前拥有的：

包括图像的长宽比，一切都很好，但是我想居中于中间，大致是这样：

我需要更少的云层和更多的山脉，如何裁剪背景图像以居中居中？

我的HTML：

<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（这是app.css）：

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;
}

Answer 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更改为您需要的任何内容。

Answer 2

首先，我将图像裁剪到想要的高度。因此，在3000像素左右，您应该使用一种具有一定高度的尺寸。然后，一旦它到达2500px之类的桌面，就应该使用CSS媒体查询来更改该背景图像。然后，再次使用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/cssref/pr_background-position.asp

注意：如果您像我上面建议的那样裁剪出3种尺寸，您甚至不必使用位置设置。

额外注意：这是CSS媒体查询的链接：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

您如何仅显示部分背景的CSS？

问题描述投票：1回答：2

2个回答

最新问题

您如何仅显示部分背景的CSS？

问题描述 投票：1回答：2

2个回答

最新问题

问题描述投票：1回答：2