Question

如何停止重复拍摄背景图像？我的问题更像是如何设置我的图像，以便通过我的整个网页看起来像一个图像而不会看到重复。

Answer 1

试试这个CSS3代码段：

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;
}

Answer 2

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

Answer 3

在CSS中使用“background-repeat：no-repeat;”。

#button {
    background: url('Images/image.png');
    background-repeat: no-repeat;   
}

Answer 4

刚读完时，听起来像你要求的那样：

background-repeat: no-repeat;

但如果您希望图像按比例拉伸以填充整个背景，那么您需要：

background-size: cover;

DEMO：http://jsbin.com/viyay/1

#container {
  background-image: url(http://placekitten.com/900/800);
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-size: cover;
  background-position: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="container">

    <!-- YOUR WEBSITE CONTENT HERE -->

  </div>
</body>
</html>

ALTERNATE DEMO（无拉伸到填充）：http://jsbin.com/dewucu/1

#container {
  background-image: url(http://placekitten.com/300/300);
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-repeat: no-repeat;
  background-position: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container">

    <!-- YOUR WEBSITE CONTENT HERE -->

  </div>
</body>
</html>

如何使背景图像看起来像一个单一的图像

4 个答案: