背景图像和元素

Question

我需要在图片上加上一些元素：

什么是更好的方法？

• 使用img标签并将页面上的所有元素与相对/绝对定位对齐？

• 或使用background-image css属性？

我已经开始使用img标签，但现在我已经决定使用背景图像了。可悲的是，我遇到了基本的问题，因为当我使用背景属性时，只有在有东西时才能看到图像。我认为这仍是一个非常简单的问题。

感谢您帮助我：）

SCSS

header {
    margin-top: 78px;
    width: 100%;
    background-image:url(../img/header.png);
    background-position: center;
    background-repeat: no-repeat;
}

Answer 1

如果要在背景图像上叠加内容（看起来像你这样做），最好的方法是在div中添加背景图像并给它一个高度，然后在div中添加内容。例如：

<div class="bg-image">
   <div class="bg-image-module">
     <p>Some Content</p>
   </div>
</div>

.bg-image {
   height: 500px; // change to be what you need.
   background-image: url(/path/to/image.jpg)";
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}

Answer 2

根据Neelam Khan的例子，你也可以使用短途财产： HTML + SCSS

<div class="bg-image">
    <div></div>
    <div></div>
    <div></div>
</div>
.bg-image {
    position: relative;
    height: 500px; // change to be what you need.
    background: url(/path/to/image.jpg) center / cover no-repeat;
    div:nth-child(1) { //this will select the first div
        position: absolute;
        top: 30px;
        left: 100px;
    }
}

  

什么是更好的方法？

在相对定位元素中使用background-image css属性，并将其子项设置为绝对定位。