Question

我是HTML / CSS的新手，我正在尝试到目前为止我学到的东西。

我设置了标题，但我想在标题中添加背景图片。无论我做什么，我都无法在标题中获得大规模的图像。它要么是瓷砖，要么是如此之大，以至于我无法在标题中看到图像。

到目前为止，这是我的工作代码：

<style>
header {
        text-align: center;
        font-family: 'Permanent Marker', cursive;
        color: #AA1166;
        max-height: 500px;
        background-image: url("http://i.imgur.com/8ClzWQ5.jpg");
        background-repeat: no-repeat;
        background-size: cover;

同样，我是新手，所以也许我正在努力完成一些我没有学到正确代码的东西。有人可以解释一下吗？

Answer 1

我想在标题

中添加背景图片

请检查以下代码。

<style type="text/css">
header {
text-align: center;
font-family: 'Permanent Marker', cursive;
color: #AA1166;
background-image: url("http://i.imgur.com/b6y6Xvb.jpg");
background-repeat: no-repeat;
background-size: cover;
background-color: #666;
width:960px;
height: 200px;
margin: 0 auto;

}

Answer 2

你可以这样做

header {
   background: url(http://i.imgur.com/8ClzWQ5.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   text-align: center;
   font-family: 'Permanent Marker', cursive;
   color: #AA1166;
   min-height:300px;
   max-height: 500px;
}

Answer 3

请参阅以下代码

header {
        text-align: center;
        font-family: 'Permanent Marker', cursive;
        color: #AA1166;
        height: 500px;
        background-image: url("http://i.imgur.com/8ClzWQ5.jpg");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% auto;
}

Answer 4

您错过了height属性

为什么我无法在标题中缩放此图像？

4 个答案: