Question

我刚刚完成了网站的设计，现在我试图将整个主体布局在一个整体而不是瓷砖不断重复自己。请问我该怎么做？

我不确定我是否有道理，但就像一张墙纸延伸出来而不是30块小瓷砖重复出现

这是我的代码

HTML and the CSS

*{
  padding: 0px;
  margin: 0px;

}

body {
  background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS6TXzo5k9VRo8f0KY4P5UQECoegTmNsEcYpO2gNIuXxAN6CwBwEw')
}

和html

<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>

    </head>
    <body>


</body>

Answer 1

您需要设置background-size。有两种选择：

选项1）封面将保持成比例 - 演示http://jsfiddle.net/jUcL9/4/（拖动窗格之间的手柄以更改预览窗格的宽度/高度）

body { 
    background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS6TXzo5k9VRo8f0KY4P5UQECoegTmNsEcYpO2gNIuXxAN6CwBwEw') no-repeat center top fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

如果您不希望背景保持在顶部，则可以使用center center代替center top - 演示http://jsfiddle.net/jUcL9/

选项2） 100％100％; 会扭曲以适应 - 演示http://jsfiddle.net/jUcL9/1/

body { 
  background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS6TXzo5k9VRo8f0KY4P5UQECoegTmNsEcYpO2gNIuXxAN6CwBwEw') no-repeat center center fixed; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}

Answer 2

您需要指定背景大小并使其不重复。

以下是要添加到正文的一些css属性：

background-size:100px 100px;
background-repeat:no-repeat;

您需要调整到合适的尺寸。

Answer 3

尝试将此插入您的css文件：

html { 
  background: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS6TXzo5k9VRo8f0KY4P5UQECoegTmNsEcYpO2gNIuXxAN6CwBwEw") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

身体形象与身体定位

3 个答案: