在CSS样式中,你可以通过以下方式使用background-origin属性: element { background-image: url('image.jpg'); background-origin: padding-box; /* 或 border-box、content-box */ /* 其他相关属性,如 background-position、background-repeat 等 */ } 1. 2. 3. 4. 5. 你可以将background-origin属性与...
background-origin:padding-box|border-box|content-box|initial|inherit; 该属性的值如下表所示。 让我们通过一些插图来理解这个属性。 示例1 在这个例子中,有三个带有背景图像的 div 元素。在这里,我们使用 background-origin 属性的 padding-box、border-box 和 content-box 值。 <!DOCTYPEhtml> background-...
作用:规定背景图片的定位区域。 说明:设置或检索对象的背景图像计算<'background-position'>时的参考原点(位置)。 语法: background-origin:padding-box|border-box|content-box; padding-box:背景图像相对于内边距框来定位。 border-box:背景图像相对于边框盒来定位。 content-box:背景图像相对于内容框来定位。 CSS...
但是我们现在并不想这样,那就可以用css3的属性background-clip,这是一个裁剪属性 加上background-clip:content-box;就可以了,什么意思呢?就是说从内容开始计算背景,那么就不会包括padding了。 那么background-origin什么意思呢? 不知道你们有没有发现一个现象,就是我们使用精灵图的时候默认图片会显示在左上角。
css3中background-origin的用法 简介 background-Origin属性指定了背景图像的位置区域 工具/原料 dreamweaver cs6 方法/步骤 1 新建文件创建div样式 2 创建两个盒子 3 效果展示 4 background-origin属性的应用 5 效果如图 6 background-origin属性的应用 7 效果如图 8 附上源码.div{ background:url(11.png) ...
1 第一步，在HBuilder创建的web目录下，新建页面backgroundOrigin.html，如下图所示：2 第二步，在元素内插入一个div标签，然后在div标签内插入一个无序列表，如下图所示：3 第三步，利用class选择器设置div标签样式属性，设置宽度和高度为600px，字体属性，如下图所示：4 第四步，设置完毕后保存代码，在浏览...
background-origin属性是用于设置背景图片的定位区域,它有三个值分别表示相对于内边距框定位、相对于边框盒定位、相对于内容框定位。 CSS3 background-origin属性 作用:规定背景图片的定位区域。 说明:设置或检索对象的背景图像计算 <' background-position '> 时的参考原点(位置)。
background-origin用来规定元素背景图像的相对定位位置,它有三个属性值: 1、border-box border-box表示元素背景图像相对于border区域开始定位。 代码如下: 效果如下: 从上图可以看出,元素的背景图像从边框区域开始定位。 2、padding-box paddin
background-origin : 取值:border:从border区域开始显示背景。padding:从padding区域开始显示背景。content:从content区域开始显示背景。 说明: 用来决定 background-position 计算的参考位置。 background-size : 取值:<length>:由浮点数字和单位标识符组成的长度值。不可为负值。<percentage>:取值为0%到100%之间的值...
background-clip是用来设置div(元素)中背景(包括背景色和背景图)的起始位置,而background-origin是截取的背景图的起始位置。 当有background-origin: content-box的时候: 没有background-origin: content-box的时候: 从以上两张图可以明显看到截取的背景图位置不一样,当没有background-origin是背景图默认是从padding...