CSS

Question

我想在我的网站背景上显示一些随机设计图像作为背景图像，现在的问题是每次我放置这样的图像时它都会以某种方式与附近的框等交互。我只想让我的设计图像（小图标等）成为背景的一部分，而不接触其他非设计元素，如文本、框等。

我猜是这样的：

body {
    min-height: 100vh;
    position: relative;
    height: auto;
    width: auto;
    background-image: url("/static/pattern.jpg");
    background-repeat: repeat;
    z-index: -10;
} -> "The actual background of the site"

.design_element_01 {
    position: relative;
    z-index: -1;
    background-image: url("/static/xyz.png");
    max-width: 100px;
} -> "The design element that should get placed onto the body background from above"

Answer 1

尝试将您的 design_element_01 位置设置为绝对而非相对然后尝试将其放置在您想要使用的位置剩下：正确的：最佳：底部： z 索引：

希望这有效！

Answer 2

尝试：

.design_element_01 {
  position: absolute
  /*...*/
}

此外，您可能需要将 max-width 更改为 width，因为 background 不会为元素提供宽度。

背景居中

有几种不同的方法可以使背景居中。我将在这里概述一个；如果它不适合你，我可以描述其他人。

本质上，这个想法是让 .design_element_01 元素本身占据整个页面。然后，background-size可以用来约束背景的大小，background-position可以用来居中。一个基本的例子是：

.design_element_01 {
  position: absolute;
  top: 0;
  left: 0;
  background: url("/static/xyz.png");
  width: 100%;
  height: 100%;
  /* I'm using 100px here since you used max-width: 100px, but you can use whatever you want. */
  background-size: 100px;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

（请注意，我尚未对此进行测试；您可能需要对其进行调整。）

但是，如果您测试此示例，您会注意到这会使屏幕的背景居中，但不一定是整个页面。这可能是也可能不是您想要的。如果不是，您可以更改 <body> 元素的位置属性:

body {
  position: relative;
}

这应该会导致 .design_element_01 元素相对于 <body> 元素定位。

我还创建了一个 JSFiddle 示例来演示解决方案：https://jsfiddle.net/mouqewzv/。

最后，如果您不希望您的元素完全居中，而只是偏离中心，您可以调整 left 和 top design_element_01 的属性将背景最初定位在中心，但随后将其偏移。

CSS - 如何在我的背景上放置背景图像？

CSS - how to place a background-image on my background?

html

background-image

背景居中