背景圖像和它的元素

什麼是更好的方法？

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

背景圖像和它的元素

回答

相關問題