Question

我正在制作一个网站。但我有一个问题。每次我预览时，我的背景图像都比屏幕大。

HTML：

<div class="image">
     <img src="images/background.jpg" alt="">
</div>

CSS：

.image { 
   position: absolute;
   margin-left: -50px; 
   margin-top: -25px;  
 }

我的图片尺寸为1920x1200

编辑：我是用这段代码做的：

html { 
  background: url(images/background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 1

我建议通过CSS放入背景图片，然后使用background-size: cover;，因为这会使用浏览器窗口缩放它。

Answer 2

试试这个：

<强> CSS

.image { 
   background-image:url(images/background.jpg);
   background-size:100%;
   position: absolute;
   margin-left: -50px; 
   margin-top: -25px;  
   width:Xpx; /* change X to what you want */
   height:Ypx;  /* change Y to what you want */
 }

<强> HTML

<div class="image">
</div>

但是，使用此方法将height和width属性添加到 .image 非常重要，这样div就不会有0x0尺寸。

Answer 3

我不知道你在这里要做什么，但你要将样式添加到div而不是图像。

.image img{ position: absolute; margin-left: -50px; margin-top: -25px; }

会影响div内部图像的标记。

无论如何使用身体背景图像代替。并且有一些js文件可以将图像拟合到任何尺寸的显示器。

祝你的网站好运！

Answer 4

.image { 
   position: absolute;
   margin-left: -50px; 
   margin-top: -25px;
   width: your value;
   height: your value;
   background-size: 100%;
 }

当您想要建立一个网站时，可以了解这一点你必须学习这些基本知识。

Dreamweaver-背景图像调整大小

4 个答案: