CSS3 -- 背景原点（background-origin）

最新推荐文章于 2022-03-13 21:30:03 发布

转载最新推荐文章于 2022-03-13 21:30:03 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/libinblog/p/4497335.html

文章标签：

#人工智能

本文详细介绍了CSS3中background-origin属性的使用方法及其兼容性问题。包括如何设定背景图片的定位原点，以及在不同浏览器中的表现一致性。并提供了实际应用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、background-origin 语法、取值

　　CSS3属性background-origin，主要用来决定背景图片的定位原点，（即背景图片定位的起点 --- background-position的原点）。

　　background模型图（元素默认时的背景图像原点位置）

元素Background中的background-color原点位置是在Border的外边缘处；

background-image的原点是在元素的padding外边缘处（也就是在元素border的内边缘处）。

-----》
　　background-origin在早期的Webkit和Gecko内核浏览器（Firefox3.6-,Safari和Chrome代版本）他们都支持一种老式的语法规则，类似于background-clip在Firefox3.6以下的版本一样；
　　现代浏览器都支持的是一种新的语法。

 （老）、background-origin: padding || border || content
 （新）、background-origin: padding-box || border-box || content-box

提示：为了兼容新老版本的浏览器，在使用background-origin改变background-position的原点位置时，最好老旧语法一起加上，并且新语法放在老语法后面，这样只要是支持新语法规则的浏览器就自动会识别background-origin的最新语法。

2、background-origin 兼容

3、background-origin 用法

兼容写法：
　　/*Old Webkit and Gecko*/
   -moz-background-origin: padding || border || content;
   -webkit-background-origin: padding || border || content;
   /*New Webkit and Gecko*/
   -moz-background-origin: padding-box || border-box || content-box;
   -webkit-background-origin: padding-box || border-box || content-box;
   /*Presto*/
   -o-background-origin: padding-box || border-box || content-box;
   /*W3c标准*/
   background-origin: padding-box || border-box || content-box;

4、background-origin 实例：请点击查看 http://www.w3cplus.com/content/css-background-origin

整理自：（W3CPlus）CSS3 background-origin

转载于:https://www.cnblogs.com/libinblog/p/4497335.html