Question

我有一个div，我想为其分配背景图片，我这样写，但它不起作用：

body, html{
  height: 100%;
}
.mount{
  position: relative;
  height: 100%;
}

.mount::before{
  content: "";
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid black;
  border-radius: 50%;
  background-color: orange;
  background-image: url(Image\mountain.png);
}

<div class="mount">

Answer 1

我想您想在背景图像上得到圆形，而直接在DIV上使用常规背景图像则是不可能的。要像使用伪元素一样进行操作，请执行以下操作：

只需添加z-index: -1;即可将伪元素移动到其父元素的后面，并可以定义背景位置和/或大小（如果需要）：

body,
html {
  height: 100%;
}

.mount {
  position: relative;
  height: 100%;
}

.mount::before {
  content: "";
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid black;
  border-radius: 50%;
  background-color: orange;
  background-image: url(https://placehold.it/400x400/fa4);
  background-position: center center;
  z-index: -1;
}

<div class="mount">
  <p>some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some
    example text. some example text. </p>
  <p>some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some
    example text. some example text. </p>
  <p>some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some
    example text. some example text. </p>
  <p>some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some
    example text. some example text. </p>
  <p>some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some
    example text. some example text. </p>
  <p>some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some
    example text. some example text. </p>
  <p>some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some example text. some
    example text. some example text. </p>
</div>

Answer 2

这是我在:before中附加的图片

如果显示图像，请检查您的文件夹名称和图像名称

让我知道您是否需要进一步澄清

.mount{
  position: relative;
  height: 100%;
  margin-top:150px;
}

.mount::before{
  content: "";
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid black;
  border-radius: 50%;
  background-color: orange;
    background-image: url(http://via.placeholder.com/350x150);
    background-position: center;
    background-repeat: no-repeat;
    background-position: center;
    background-repeat: no-repeat;
    z-index:-1;
}

    <div class="mount">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

div ::背景图片之前

2 个答案: