background-origin属性在CSS中用于设置背景图片的定位区域,即决定背景图片从哪里开始定位。它有三个主要的属性值,分别表示背景图片相对于不同元素区域的定位起点: 属性值及意义: padding-box:背景图片相对于内边距框(padding box)来定位。这意味着背景图片从元素的padding开始,但不会绘制到border区域。这是background-o...
此属性在 CSS Selectors Level 3(CSS 选择器第 3 级) 中定义。应用于a, address, b, big, blockquote, body, button, caption, center, cite, code, col, colgroup, custom, dd, defaults, dfn, div, dl, dt, em, fieldset, form, hn, html, i, img, input type=button, input type=checkbox,...
CSS代码: div {width:200px;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg")no-repeat;border:20pxsolidrgba(0,0,0,0.3);padding:20px;-webkit-background-origin: content-box;} HTML代码: 预览效果: CSS3之背景定位原点background-origin就为大家介绍到这里了,希望能对大家有...
The background-origin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.
The background-origin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.
Background-origin是CSS3为Background扩展的第三个属性,从Background-origin字面上不难发现是指背景图片的原点,其实background-origin主要就是用来决定背景图片的定位原点,换句话说就是背景图片定位的起点(background-position的原点)如果你看过了《CSS3 background-clip》一文,你不难发现,元素Background中的background-...
CSS 边框也能动画?background-origin 和 -clip 来施加魔法~ 边框动画 为边框加上动画效果,往往会让交互显得更加友好。 边框通常设置属性border/box-shadow/outline,通过它们即可以实现不同的边框效果。 先来看一种基础的边框动画:【码上掘金】 https://code.juejin.cn/pen/7163822571387879435...
CSS3 background-origin 属性实例 内容框相对定位的背景图片: div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left; background-origin:content-box; } 尝试一下 » 浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。属性 background-origin 4.0 ...
CSS3 background-origin 属性实例 内容框相对定位的背景图片: div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left; background-origin:content-box; } 尝试一下 » 浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。属性 background-origin 4.0 ...
background-clip和background-origin是 CSS 中两个与背景相关的属性,它们都可以用来控制背景图像或颜色的显示范围,但它们的作用略有不同。 background-clip:此属性定义背景的绘制区域。它有三个可能的值: border-box:背景被裁剪到边框盒(默认值)。 padding-box:背景被裁剪到内边距盒。