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与混合添加到图片中，给您的印象是实际上更广泛图像。

当您尝试重现styles时，您错过了这一点，并通过添加background-size得到已解决，而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; }：

CSS

Demo

您的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%; }：

{{1}}

Demo

CSS中图片显示不正确

1 个答案: