0

我有一个带有 css 样式文件的网页。当我尝试在下面的代码中缩放header2.png 时，图片会被裁剪。

知道为什么吗？ 

#header {
    background:url(images/bg.gif) repeat-x 0 0; 
    height: 70px;
    position: absolute;
} 
#logo a {
    background:url(images/header2.png) no-repeat 0 0; 
    width: 800px;
    height: 80px;
    position: absolute;
    top:0;
    left:10;
}
4

2 回答 2

2

您需要使用 background-size CSS 属性来缩放图片。您可以使用的一种选择是让图像按比例覆盖标题，如下所示......

#logo a { 
     background:   url(images/header2.png) no-repeat 0 0;
     width: 800px; 
     height: 80px;  
     position: absolute; 
     top:0;
     left:10;
     background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
     }

当然，您可以通过将“覆盖”更改为像素或百分比来进行试验。有关在 CSS 中调整背景大小的更多信息...请访问http://www.w3schools.com/cssref/css3_pr_background-size.asp

于 2013-07-24T14:23:10.517 回答
1

为什么不将 header2.png 图像重新调整为您想要的大小。

于 2013-07-24T14:22:11.087 回答