cjh CSS背景 2022-09-26 此文章访问量 376

CSS重复背景图像、只显示一次、固定位置显示等

<html>
<head>
<style type="text/css">
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat: repeat
}
</style>
</head>
<body>
</body>
</html>

图片.png

如何在垂直方向重复背景图像
<html>
<head>
<style type="text/css">
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>
图片.png
如何在水平方向重复背景图像
background-repeat: repeat-x

如何仅显示一次背景图像
background-repeat: no-repeat

如何放置背景图像
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

如何使用%来定位背景图像
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 30% 20%;
图片.png
如何使用像素来定位背景图像
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 100px;

如何设置固定的背景图像
background-repeat:no-repeat;
background-attachment:fixed