主页 / 问题 / 1004017
Accepted
filicaliva
Asked:2020-07-18 01:40:16 +0000 UTC2020-07-18 01:40:16 +0000 UTC

如何将背景图片的高度设置为屏幕的边框？有哪些途径？

  • 772

在此处输入图像描述

随便写个方法，我自己搞定，我试过vh，但是适应性当时是0。

html

2 个回答

  1. 试试background-size:cover。或者你可以试试background-attachment: fixed

    • 0
  2. Best Answer

    您可以尝试通过 来完成background-size，但正如您在演示中看到的那样，这不是一个选项。

    body {
  height: 1000px; /* для примера выставим высоту больше, чтобы посмотреть что будет после того как проскроллим. */
  background-color: red;
  background-image: url('https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg');
  background-repeat: no-repeat;
  background-position: top center; /* изображение по ширине будет от центра картинки, а по высоте от верха */
  background-size: auto 100vh; /* Тут самое основное, auto - это размер по ширине, он будет выстраиваться пропорционально размеру картинки. 100vh - это размер по высоте, т.е. в нашем случае 100vh равносилен 100% высоте !экрана! (вьюпорта). */
}

    根据我的以下建议 - 使用一个伪元素，该元素将等于屏幕的宽度和高度，位于页面顶部（或距边框所需的高度），以及其中的图片。

    例子：

    body {
  height: 1000px;
  background: red;
}
 
body::before {
  content: '';
  display: block;
  width: 100%;
  height: 100vh; /* Высота экрана */
  background-image: url('https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  left: 0; top: 0; right: 0;
  z-index: -1; /* Важно */
  pointer-events: none; /* Отключим ему таргет, на всякий пожарный.. */
}

    ps代替伪元素，例如，您可以使用其他东西<div>，但是您还必须进入 HTML，而此解决方案仅在 CSS 中。

    • 0

相关问题