Question

我正在整理一个非常基本的网站，这是我大学课程的一部分。我已经放入一个背景图像，它几乎完全适合 - 但由于某种原因，我在图像的顶部有一个白色边缘（大约一英寸厚）和左边的白色边缘（大约半英寸）。 / p>

这是我的图像css：

    #image {

     width: 100% 100%;
     position: fixed;
     z-index: -9;
     opacity: 0.8;
     display: block;
     background-size: cover;
 }

我已将背景图片放在开始正文标记之后的html中，如下所示：

    <img id="image" src="CourseworkImages/background2.jpg" alt="Background Image">

我不知道为什么我在页面上有这些边距并且它们破坏了页面的外观 - 非常感谢任何帮助！

由于

Answer 1

我建议您使用CSS，而不是像我一样使用img标记。类似的东西：

body {
  background-image: url( '/path/to/image.jpg' );
}

使用此方法可以摆脱许多使用的属性。您可能希望保留的是background-size。

正如其他人所指出的那样，大多数浏览器会向8px元素添加body边距，从而产生不需要的空白区域。要删除它，请将margin: 0;添加到上面的CSS选择器。

为了保持不透明度，我会在身体上使用伪元素。您还可以创建内置所需不透明度的PNG。使用CSS会更灵活。

＆＃13;

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background-color: hotpink;
}

body:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.6;
  background-image: url( 'http://placekitten.com/1600/1600' );
  background-repeat: no-repeat;
  background-size: cover;
}

＆＃13;

Answer 2

非常基本的例子：

body {
     margin: 0;
     padding: 0;
     border: 1px solid yellow;
     border-right-style: none;
     border-bottom-style: none;
     width: 100%;
     opacity: 0.8;
     display: block;
     background-size: cover;
     background-image: url("CourseworkImages/background2.jpg");
}

你也可以用包装div来做。您可能还需要使用background-position和repeat属性。而且你还需要重置浏览器的默认边距和填充，以便之间没有空间。正如我所说，基本的例子。如果您对此主题感兴趣，可以查看css框架，它会重置所有浏览器预定义的样式，例如： G。 normalize.css

在页面的顶部和左手边的边界与背景图象

2 个答案: