如何在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中显示图像？

回答

相关问题