时间戳

首页 > 解决方案 > 你如何只显示背景的一部分是css？

html - 你如何只显示背景的一部分是css？

问题描述

作为 HTML 和 CSS 的新用户，我试图让图像显示为带有文本的横幅，但是我测试过的所有内容都表明图像不可能，所以我使用 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;
}
<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>

标签： htmlcssimagebootstrap-4image-size

解决方案

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

推荐阅读