html - CSS中图片显示不当

Question

事情是这样的，这是 CSS 代码 for the image in h1

h1 { background-color: #000033; 
 background-image: url(sunset.jpg); 
 background-position: right; 
 background-repeat: no-repeat; 
 padding-left: 20px; 
 height: 72px; 
 color: #FFFFFF; 
 font-family: Georgia, serif; 
 line-height: 200%; 
 margin-bottom: 0; }

我用的是同一张图片sunset.jpg，但是我的代码是

h1{
    background-image:url(images/sunset.jpg);
    background-position: right; 
    background-repeat:no-repeat;
    height:72px; 
    padding-left:20px;
    color: #FFFFFF; 
    margin-bottom:0;
    background-size:100% 100%;
    line-height: 200%; 
}

我必须使用这个代码

background-size:100% 100%;

我就是不明白，为什么在第一个 CSS 代码中，它没有使用 background-size:100% 100%; 仍然得到一个完美的 h1？

Answer 1

就像我在评论中提到的那样，在该链接上使用的想法是使用 background-color 将 blend 到图像中，给您的印象实际上是更宽的图像。

当您尝试重现 styles 时，您错过了这一点，并通过添加 background-size 来解决，这不会不会给您相同的最终结果(它实际上是拉伸(stretch)图像以填充容器)。

这是原始的 CSS:

h1 {
    /* Removed the property below so you see what's missing in your styles */
    /*background-color: #000033;*/
    background-image: url(http://jtcollin.com/chapter4/pacific4/sunset.jpg);
    background-position: right;
    background-repeat: no-repeat;
    padding-left: 20px;
    height: 72px;
    color: #FFFFFF;
    font-family: Georgia, serif;
    line-height: 200%;
    margin-bottom: 0;
}

Demo

你的 CSS:

h1 {
    background-image: url(http://jtcollin.com/chapter4/pacific4/sunset.jpg);
    background-position: right;
    background-repeat: no-repeat;
    padding-left: 20px;
    height: 72px;
    color: #FFFFFF;
    font-family: Georgia, serif;
    line-height: 200%;
    margin-bottom: 0;
    background-size:100% 100%;
}

Demo