如何在背景图像 url() 中传递背景大小和背景位置

Question

我有一个 div，我在其中设置 background-image url() 我的问题是我想实现这样的目标 background-image url('example') cover center

目前，我的代码如下所示

div {
   background-image: url(example);
   background-size: cover;
   background-position: center;
}

正如我之前提到的，我想实现这样的目标

div {
   background-image: url(example) cover center;
}

Answer 1

background-image 仅支持图像，这样您就可以使用滤镜叠加它们。不可能直接说出它应该是什么样子。为此，您仍然需要使用 background-size 和 background-position

Answer 2

您应该可以在此处找到 css 背景图像效果以及如何居中并使图像适合屏幕封面的参考：https://www.w3schools.com/htmL/html_images_background.asp

我会尝试使用下面的代码，它可能会解决您的问题：

.yourDiv {
  background-image: url('Background URL here');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}

如何在背景图像 url() 中传递背景大小和背景位置

How to pass background-size and background-position inside the background-image url()

html

css

styles

background-image