Question

我在尝试创建的网站遇到了一些问题。我的目标是有一个名为“标题”的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;
}

Answer 1

只需在标题div中写一些内容或设置高度即可。

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

您也可以这样做。这是一种快速的方法

<!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>

希望这是有帮助的

如何在div中显示图像？

2 个答案: