[英]Background img not showing up
我正在嘗試使背景標題圖像具有響應性。 我需要將其設置為視口高度或圖像高度的100%,以較小者為准。
一個示例是類似於https://brittanychiang.com/v1/的標題橫幅
div大小看起來正確,但是圖像似乎沒有顯示出來嗎?
在這里創建了一個jsfiddle: https ://jsfiddle.net/pnnxm1yf/2/
header { height: 100vh; max-height: 850px; } #header-banner { color: #fff; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://unsplash.com/?photo=gzH1qxPLXtA) center center no-repeat; background-size: cover; position: relative; }
<p>Why is my image not showing up?</p> <header> <section id="header-banner"> </section> </header> <p>content after image</p>
增加height: 100%
#header-banner
height: 100%
。 高度為0 atm。
您需要將height屬性添加到具有背景圖像的同一元素上。
#header-banner {
height: 100vh;
max-height: 850px;
color: #fff;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://unsplash.com/?photo=gzH1qxPLXtA) center center no-repeat;
background-size: cover;
position: relative;
}
為標頭橫幅增加高度可以解決此問題。 另外,請正確輸入圖片網址。
#header-banner {
color: #fff;
/* background: #ffffff url(img_tree.png) center center no-repeat; */
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://unsplash.com/?photo=gzH1qxPLXtA) center center no-repeat;
background-size: cover;
/* background-color: red; */
position: relative;
height: 100%;
width: 100%;
}
您沒有正確添加img網址,如果您解決了它,則將正確獲得輸出
<!DOCTYPE html> <html> <head> <style> #borderimg { border: 10px solid transparent; padding: 15px; -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */ border-image: url(border.png) 30 round; } </style> <p id="borderimg">Here, the middle sections of the image are repeated to create the border.</p> </body> </html>
#header-banner {
height: 100%;
color: #fff;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1502582877126-512f3c5b0a64?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=') center center no-repeat;
background-size: cover;
position: relative;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.