Question

我希望背景为渐变色，并且图像位于渐变色上，直到我将溢出设置为auto之前，它都可以正常工作，因为div标签在移动视图上扩展了，这使得为html标签隐藏的溢出不可靠，所以我将图片制作为标签

.background_image {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.3;
  width: -webkit-fill-available;
  height: -webkit-fill-available;
}

编辑

我已经固定了图像的位置，因此它一直沿滚动位置移动，这并不是我真正需要的，但是可以。

编辑2

问题是我代表物体元素内的标签使用线性梯度bg，我通过将图像固定位置并将bg更改为径向梯度并将该梯度仅用于样式化来固定它车身标签确实解决了整个问题

Answer 1

请检查以下摘自here的代码

body,
html {
  height: 100%;
  margin: 0;
}

.bg {
  /* The image used */
  background-image: url("https://via.placeholder.com/800");
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="bg"></div>

  <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>

</body>

</html>

Answer 2

您可以将url属性用作背景：

.background_image {
  background: url(YOUR_IMAGE_URL) no-repeat center center fixed;
  width: 100%;
  height: 100%;
}

背景图片无法填满整个页面

2 个答案: