CSS：使背景圖像顯示沒有內容和/或固定大小？

我有了這個代碼（無頭圖像可見）至今：CSS：使背景圖像顯示沒有內容和/或固定大小？

.wrap { 
 
    margin: 50px auto; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background-image: url('https://placebear.com/1000/800'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
} 
 

 
.header { 
 
    background-image: url('https://placebear.com/940/248'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
}

<div class="wrap"> 
 
    <div class="row"> 
 
    <div class="medium-12 columns header"></div> 
 
    </div> 
 
</div>

如果你給頭圖像248px固定的大小，你可以看到它出現。實例可見頭圖像：

.wrap { 
 
    margin: 50px auto; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background-image: url('https://placebear.com/1000/800'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
} 
 

 
.header { 
 
    background-image: url('https://placebear.com/940/248'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
    height: 248px; 
 
    border: 3px solid white; 
 
}

<div class="wrap"> 
 
    <div class="row"> 
 
    <div class="medium-12 columns header"></div> 
 
    </div> 
 
</div>

是否有辦法使它顯得不使用固定的高度？

就像使用僅具有src-和alt-attribute的經典img-tag一樣。然後從圖像文件自身讀出高度。

我想避免在那裏的固定高度，因爲如果圖像改變，那麼它會變得全部錯誤。

來源

2017-03-24 michael.zech

退房上公認的答案[如何讓DIV高度自動調節背景大小]（http://stackoverflow.com/q/600743/3162554）。如果您可以將「」添加到HTML，那麼它將適合您的需求。否則，你需要JavaScript來[獲取CSS背景圖像的大小]（http://stackoverflow.com/q/3098404/3162554），然後動態更改div高度。 – Marvin

@Marvin非常感謝。 :) –

我認爲你必須定義一個高度，如果使用背景圖像。也許是更好地使用img標籤，只是把100％的寬度，像這樣：

.wrap { 
 
    margin: 50px auto; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background-image: url('https://placebear.com/1000/800'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
} 
 

 
.header { 
 
    border: 3px solid white; 
 
} 
 

 
img { 
 
    width: 100%; 
 
}

<div class="wrap"> 
 
    <div class="row"> 
 
    <div class="medium-12 columns header"> 
 
     <img src="https://placebear.com/940/248" alt="Bear Image"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-03-24 10:36:06 Sean

是的。我猜你是對的。來自薩爾的問候。 –

CSS：使背景圖像顯示沒有內容和/或固定大小？

回答

相關問題