如何在div中顯示圖像？

我一直在嘗試創建一個網站有一些麻煩。我的目標是創建一個名爲「標題」的div，其中包含跨越頁面頂部的背景圖片。但是，當我將其編碼爲（就我的知識而言，它應該被編碼）我只剩下一個空白頁面。如何在div中顯示圖像？

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Index</title> 
     <link rel="stylesheet" type="text/css" href="mycss.css"> 
    </head> 
    <body> 
     <div id="header"></div> 
    </body> 
</html>

而且我的CSS

#header{ 
    background-image: url("header.jpg"); 
    50% 0 repeat; 
    background-size: cover; 
}

來源

2015-11-03 Aaron

你把這些值像'背景position'或'背景size'和'背景repeat'的屬性。 – cocoa

嘗試設置'display：block;寬度：100％;位置：相對; height：90px;'#header div'' 高度和寬度，因爲'#header div'內沒有內容。如果沒有內容，如果未設置高度和寬度，則不會展開，並且您的背景不會顯示。 – ghaschel

只要寫頭的div裏面的東西或設置高度。

#header{ 
 
    background-image: url("https://www.gravatar.com/avatar/8bb98c95963486c35af93203a53f4c98?s=32&d=identicon&r=PG&f=1"); 
 
    background-position: 50% 0; 
 
    background-size:cover; 
 
    font-size:2em; 
 
    color:#fff; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Index</title> 
 
     <link rel="stylesheet" type="text/css" href="mycss.css"> 
 
    </head> 
 
    <body> 
 
     <div id="header">Hello</div> 
 
    </body> 
 
</html>

來源

2015-11-03 19:21:15 CodeRomeos

as @cocoa在評論中提到，正確的'repeat'和'position'屬性是'background-position：50％0;'和'background-repeat：repeat;' – ghaschel

所以@CodeRomeos之所以wasn' t工作是因爲div要顯示內容需要一些內容 - （如果這種情況我覺得有點傻）有沒有辦法讓它顯示圖像而不需要文本。 – Aaron

設置div的高度以顯示沒有文字的背景圖像。 – CodeRomeos

你也可以做到這一點。這是一個快速的方法

<!DOCTYPE html> 
<html> 
<head> 
<title>Index</title> 
</head> 
<body> 
    <div style="background-image:url(http://i.telegraph.co.uk/multimedia/archive/02690/Anne-Guichard_2690182k.jpg); font-size:2em; background-size:cover; color:#fff; background-position: 50% 0;">This is div with a background picture</div> 
</body>

希望這是有幫助的

來源

2015-11-03 19:58:22 kikuyu1

如何在div中顯示圖像？

回答

相關問題