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

最新推荐文章于 2023-06-01 10:26:20 发布

托马斯大火车

最新推荐文章于 2023-06-01 10:26:20 发布

阅读量2.1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44575911/article/details/107561617

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

<!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>

在这里插入图片描述

背景图不重复、缩放、铺满页面
在这里插入图片描述

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

托马斯大火车

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
将一张背景图片重复后不缩放铺满整个页面，将一张背景图片缩放、不重复铺满整个页面

背景图重复、不缩放、铺满页面<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>这是网页标题</title> <style type="text/css"> div { width:100%; height:100%; bac
复制链接

扫一扫