css3背景图原点

最新推荐文章于 2025-01-12 17:17:01 发布

原创最新推荐文章于 2025-01-12 17:17:01 发布 · 551 阅读

0 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

9 篇文章

订阅专栏

本文详细解析了CSS中背景图原点(background-origin)属性的使用方法,包括padding-box、content-box及border-box三种定位方式的区别与应用场景，帮助读者掌握更精确的背景图定位技巧。

背景图原点指的是背景图定位的时候 0 0（坐标轴的原点）所默认的位置
如果图片平铺，那么border-box区域都是图片可以显示的区域

background-origin 改变背景图原点:

background-origin: padding-box(背景图以padding左上角为原点从padding左上角开始显示) ------ 默认原点（但是如果图片没有设置no-repeat 边框里也会显示背景图片不过是图片平铺的部分如果设置了no-repeat 图片超出的部分也会在边框内显示）

	div {
            width: 500px;
            height: 500px;
            padding: 50px;
            border: 20px dotted #ccc;
            background: url(./img/jiufen.jpg) 0 0 no-repeat;
            background-origin: padding-box;
        }

在这里插入图片描述

	div {
            width: 500px;
            height: 500px;
            padding: 50px;
            border: 20px dotted #ccc;
            background: url(./img/jiufen.jpg) 0 0 repeat;
            background-origin: padding-box;
        }

在这里插入图片描述

background-origin: content-box(背景图以内容区域左上角为原点在内容区域显示)

	div {
            width: 500px;
            height: 500px;
            padding: 50px;
            border: 20px dotted #ccc;
            background: url(./img/jiufen.jpg) 0 0 no-repeat;
            background-origin: content-box;
        }

在这里插入图片描述

background-origin: border-box(背景图以外边框左上角为原点从边框左上角开始显示)

 	div {
            width: 500px;
            height: 500px;
            padding: 50px;
            border: 20px dotted #ccc;
            background: url(./img/jiufen.jpg) 0 0 no-repeat;
            background-origin: border-box;
        }

在这里插入图片描述