背景图片和上面的元素答案

【问题标题】：background image and elements on it背景图片和上面的元素
【发布时间】：2017-03-23 08:16:58
【问题描述】：

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

什么是更好的方法？

使用 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;
}

【问题讨论】：

将标题的height设置为（与图像高度相同）
当你使用 background-image 时，你可以使用一个小技巧，那就是添加一些 padding-top 和 % 来获得图像的确切高度。

标签： html css image position background-image

【解决方案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;
}

【讨论】：

【解决方案2】：

按照 Neelam Khan 的示例，您还可以使用 shortland 财产： 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 属性并将其子元素设置为绝对定位。

【讨论】：