Question

我想要一个大图像作为我的背景，但由于某种原因，它在我的大屏幕上重复了一点。有没有办法可以根据屏幕尺寸调高图像尺寸？

编辑：所以我将HTML更改为如下所示：

<body id="wrapper">
   <div id="body">
       <img src="/images/sky2.jpg" class="stretch" alt="" />
  </div>

和我的CSS：

#body {
   width: 100%; 
   height: 100%; 
   position: absolute; 
   left: 0px; 
   top: 0px; 
   z-index: 0;
  }

.stretch {
width:100%;
 height:100%;
}

预览时不会显示背景。我有3个其他div元素，但只显示白色背景= /。

Answer 1

将background-repeat: no-repeat;移至#body而不是#body img

Answer 2

你实际上并没有在这里展示你的任何html，只是一些嵌入式CSS和一些（我假设链接？）CSS。您正在将图像作为背景图像加载到第一位css中的body元素上，这很棒。因为它在CSS中作为背景图像加载，而不是在HTML中标记，所以你的第二个CSS（使用#body img选择器）不会以任何方式影响它。

实际上你实际拥有的是：

#body {
   position:fixed; 
   top:-50%; 
   left:-50%; 
   width:200%; 
   height:200%;
   position:relative;
   background-image: url(images/sky2.JPG);
}

这是一个非常奇怪的代码。但问题的唯一相关部分是background-image部分。答案有几个部分。在CSS2中：不，您无法调整背景图像的大小。您可以将其设置为不重复（正如其他人所示），您可以设置它的位置：

body {
  background-position: center left;
}

在CSS3中你可以改变大小，你有几个选项（我想你正在寻找cover），但它只适用于最新的浏览器。该属性称为background-size，但由于它仍处于试验阶段，因此您必须为每个浏览器单独声明它：

/* this is the default */
body {
  -moz-background-size: auto;
  -webkit-background-size: auto;
  -o-background-size: auto;
  background-size: auto;
}

/* this will size the image proportionally so that it is contained, but not cropped */
body {
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

/* this will size the image proportionally so that it fills all the area */
body {
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* this will size the image as a percentage of the area */
.example #percent {
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  -o-background-size: 50% 50%;
  background-size: 50% 50%;
}

/* this will size the image to exact specifications */
.example #absolute {
  -moz-background-size: 100px 25px;
  -webkit-background-size: 100px 25px;
  -o-background-size: 100px 25px;
  background-size: 100px 25px;
}

Answer 3

<style type="text/css">
body {
background-image: url(images/sky2.JPG);
background-repeat: no-repeat;
}   
</style>

您需要为同一元素或类或其他设置它。你也可以将身体css移动到你的CSS中。

好的，我很抱歉还有其他一些问题，比如#body {。我不认为你有一个id为“body”的元素。不是尝试RTFM，但可能会阅读一些关于CSS的教程？

要缩放图像，可以查看：Stretch and scale a CSS image in the background - with CSS only

Answer 4

#img.source-image {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
}

演示页面： http://css-tricks.com/examples/ImageToBackgroundImage/

来源： http://css-tricks.com/how-to-resizeable-background-image/

我认为值得阅读该页面：）

Answer 5

1）CSS属性background-repeat: no-repeat;应该在body元素本身上，即在您指定背景的元素上。

2）在CSS中，你写#body ...我想你想谈谈body元素？然后你应该在CSS中写body。 #body将用于声明为<div id="body">。

的元素

3）另外，我不确定#body img。 #body img表示“身体内的img元素”。你真的身体内有一个img元素吗？我的意思是，你的标记是这样的吗？

<body>
   ...
   <img ... >
   ...
</body>

你真的想要设置img元素的样式吗？

无论如何，适用于img元素的样式与身体的背景无关。

背景重复，我不知道为什么

5 个答案: