将一张背景图片重复后不缩放铺满整个页面，将一张背景图片缩放、不重复铺满整个页面

最新推荐文章于 2024-12-14 22:39:00 发布

原创最新推荐文章于 2024-12-14 22:39:00 发布 · 2.2k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何使用CSS设置背景图，包括不缩放、重复、铺满页面等技巧，适用于网页设计人员快速掌握背景图的高级应用。

背景图重复、不缩放、铺满页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>这是网页标题</title>
    <style type="text/css">
        div
        {
            width:100%;
            height:100%;
            background-size:auto;/*这个用来实现不缩放（默认的）,缩放是cover*/
            position:absolute;/*这一行必须要有，但上一行不是必须的，因为auto是默认值*/
            background-image: url(../image/背景图1.png);
            background-repeat:repeat;/*这一行也可以没有，因为repeat是默认值*/
            background-attachment: fixed;/*这一行也可以没有，虽然默认值不是fixed，但对效果显示无影响*/
        }
    </style>
</head>
<body >
    <div></div>
</body>
</html>