Question

我想用图像作为背景。不幸的是，当我将背景图像属性设置为 url（myUrl）时，我得到的图像在后台的几行和一列中重复出现。我想这是因为图像自然很小。

那么，如何让图像消耗得足以让它不会重复，而是占据所有背景？

感谢您的帮助。

Answer 1

你可能想要这个：

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

看起来最简单的方法。

P.S。：你不能用纯背景图像来做。你必须用不同的层来做。

Answer 2

你可以使用两种方法; javascript或css

Jquery有一个名为suppersized的解决方案; http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/

或使用CSS：

html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}

AND HTML

<body>
<div>
<img id="background" src="image.jpg" alt="" title="" /> 
</div>

Answer 3

您可以在CSS3中使用 background-size 属性来拉伸背景图像。但CSS3并未得到广泛支持。

如果您不想重复背景图片，则可以使用background-repeat: no-repeat。

Answer 4

为防止图像重复出现，并调整图像尺寸以适合屏幕尺寸，以下两条CSS指令将为您提供帮助：

background-repeat: no-repeat; 
background-size: cover;

Answer 5

这是W3Scools使用CSS的解决方案：

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.bg {
  /* The image used */
  background-image: url("https://marketplace.canva.com/BAAuU/MAD4tNBAAuU/1/s2/canva-egg-and-ceramic-rabbit-MAD4tNBAAuU.jpg");
  /* Full height */
  height: 100%;
  width: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="bg"></div>

  <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>

</body>

</html>

如何避免背景重复 - 但扩展和占用所有bkgrd？

5 个答案: