主页 / 问题 / 909045
Accepted
theblackpost
Asked:2020-11-20 17:33:39 +0000 UTC2020-11-20 17:33:39 +0000 UTC

在背景中裁剪图像：url

  • 772
body {
    background: url(./img/body_alt.jpg) top center no-repeat fixed;
    }

图片：1920x1080 像素。在里面<body> ，当然还有内部元素。如何将图像裁剪为 290px 高度？

html

1 个回答

  1. Best Answer

    如果您需要制作背景的一部分，那么最简单的选择是将背景设置为不设置为主体，而是设置为一些高度为 290px 的固定块：

    .fon-wrap {
  position: fixed;
  top: 0;
  width: 100%;
  height: 290px;
  background: url('https://avatanplus.com/files/resources/original/58ed2c368452515b5e74b50e.jpg') top center no-repeat fixed;
}
.content {
  position: relative;
  padding-top: 50px;
  height: 1000px;
}
.content h1 {
  color: white;
  text-align: center;
}
.content p {
  font-size: 20px;
  width: 80%;
  margin: 30px auto;
}
    <div class="fon-wrap"></div>
<div class="content">
<h1>ЗАГОЛОВОК</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

    • 4

相关问题