1--》 background-origin:可以定义背景图片的定位区域,它有3个属性值 background-origin:border-box /padding-box/ content-border; border-box==》背景图片以边框为基准定位 padding-box==》背景图片以padding为区域,或者说以边框内侧为区域定义 content-border==》背景图片以内容区域进行定位 2==> 可以定义背景...
background-origin: padding-box; /* 或 border-box、content-box */ /* 其他相关属性,如 background-position、background-repeat 等 */ } 1. 2. 3. 4. 5. 你可以将background-origin属性与background-position属性结合使用,以更精确地控制背景图片在元素中的位置和显示区域。 注意: 如果元素的background-...
background-origin的作用就是指定background-position的参照点是在边框区域的左上角,还是在补白区域的左上角,或是在内容区域的左上角,对应的三个值就分别是border、padding、content. background-position的也可以是left、right等方向词语,这时候就不能说参照点了,而应该说参照面,如果值为background-origin的值为bor...
{ background:url("2.png"), url("1.png"), url("3.png"); background-repeat:repeat-x,no-repeat,no-repeat; background-position:center,left,right; background-clip: padding-box,border-box,border-box; background-origin:padding-box,border-box,border-box;-moz-background-clip: padding,border...
background-origin:border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始写显示。 效果如下: 效果图 需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。 (二).background-clip:用来将背景图片做适当的裁剪以适应实际需要。
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:content-box;就可以了,什么意思呢?就是说从内容开始计算背景,那么就不会包括padding了。 那么background-origin什么意思呢? 不知道你们有没有发现一个现象,就是我们使用精灵图的时候默认图片会显示在左上角。 如果你想改变它的位置就可以使用background-oringin ...
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-origin 属性规定背景图片的定位区域。 背景图片可以放置于 content-box、padding-box 或 border-box 区域。 实例 在content-box 中定位背景图片: .wrap{background:url(bg_flower.gif);background-repeat:no-repeat;background-size:100%100%;-webkit-background-origin:content-box;/* Safari */back...
background-clip和background-origin都为CSS3新增属性,且它俩的值都为border-box、padding-box和content-box,很容易混淆。 1.background-origin 我们都知道,background-position 属性用来设置背景图像的起始位置,其默认值为top left,即元素的左上角。可是这个“左上角”是相对于元素的什么位置(border、padding、conten...