背景图像和它的元素

什么是更好的方法？

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

来源

2016-11-09 JZK

设置标头的“高度”（与图像高度相同） – Dekel

当您使用背景图像时，可以使用一个小技巧，即用％添加一些填充顶部以获得确切的图像的高度。 –

如果要覆盖您的背景图片上的内容（这看起来像你这样做），最好的方法是添加背景图像到你的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; 
}

来源

2016-11-09 15:21:50

继尼拉姆汗例如，你也可以使用肖特兰属性： 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属性并将其子设置为绝对定位。

来源

2016-11-09 15:35:41 CastenettoA

背景图像和它的元素

回答

相关问题