HTML背景无重复

Question

如何在不重复覆盖整个页面的情况下适应 html 中的背景图像？它有 HTML 代码还是我必须使用 CSS 代码？

Answer 1

您可以使用两个 CSS 属性来控制背景图像的大小和重复：

• 背景重复
• 背景大小

为了设置为覆盖目标元素的背景图像，您可以使用值 no-repeat 和 cover，如下所示：

targetelement {
  background-image:url('example.jpg');
  background-repeat:no-repeat;
  background-size:contain;
}

如果您想了解有关这些 CSS 属性及其可能值的更多信息，请查看以下两个页面：

• https://www.w3schools.com/cssref/pr_background-repeat.asp
• https://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

您的问题的最佳解决方案是将

background-repeat:no-repeat

或

background-size: cover

添加到您的 CSS 或元素的

style

标签中。

例如：

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

如果你坚持只使用 HTML，你将不得不根据你的图像调整元素的大小，反之亦然。您的问题是指页面的背景图片，因此对于我的 openion CSS 或

style

是实现此目的的唯一方法。

Answer 3

background-repeat

物业应该是你需要的：

body { 
    background-image: url('example.jpg'); 
    background-repeat: no-repeat;
    background-size: cover; 
   }