一、背景图片平铺的原理

二、CSS背景图片平铺属性

2.1 background-image

background-image: url('image.jpg');

2.2 background-repeat

  • repeat：在水平和垂直方向上平铺背景图片。
  • no-repeat：不平铺背景图片。
  • repeat-x：在水平方向上平铺背景图片。
  • repeat-y：在垂直方向上平铺背景图片。
background-repeat: repeat-x; /* 水平方向平铺 */

2.3 background-position

background-position: 50% 50%; /* 背景图片居中显示 */

2.4 background-attachment

background-attachment属性用于设置背景图像是否固定或随着页面的其余部分滚动。

  • scroll：背景图像随着对象内容滚动。
  • fixed：背景图像固定。
background-attachment: fixed; /* 背景图像固定 */

三、实战案例

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #content {
            border: 1px solid #000;
            height: 500px;
            background-image: url('http://img12.3lian.com/gaoqing02/01/58/85.jpg');
            background-repeat: repeat-x;
            background-position: 50% 50%;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div id="content"></div>
</body>
</html>

四、总结