background-clip和background-origin 详解

.box{ padding: 20px; margin: 30px; height: 200px; width: 200px; border: 20px dashed red; display: inline-block; background: yellow url(./assets/border.jpg) no-repeat; } .border-box{ background-origin: border-box; } .padding-box{ background-origin: padding-box; } .content-box{ background-origin: content-box; } .clip-border-box{ background-clip: border-box; } .clip-padding-box{ background-clip: padding-box; } .clip-content-box{ background-clip: content-box; }

background-clip和background-origin 详解_第1张图片

background-origin 属性是用来控制元素背景图片定位点(background-position)的起始位置。

background-origin 属性取值padding-box,背景图片起始位置(background-position)将相对于padding的外边缘进行定位。

background-origin 属性取值border-box,背景图片起始位置(background-position)将相对于border的外边缘进行定位。

background-origin 属性取值content-box,背景图片起始位置(background-position)将相对于content的外边缘进行定位。

 

background-clip 属性是用来控制元素背景图片(background-image)的展示区域。

background-clip属性,取值为border-box,元素背景图片(background-image)只会在border、padding和content区域显示。

background-clip属性,取值为padding-box,元素背景图片(background-image)只会在padding和content区域显示。

background-clip属性,取值为border-box,元素背景图片(background-image)只会在content区域显示。

 

 

 

你可能感兴趣的:(CSS)