CSS3 背景图像的位置

来源：互联网发布：剑三花哥成男捏脸数据编辑：程序博客网时间：2024/05/23 18:25

一、background-origin 指定背景图像的位置区域

二、background-clip指定绘图区的背景

index.html

<style type="text/css"> div:nth-of-type(1){ width:100px; height:90px; padding:50px; border:30px dashed #000; /* 虚线 */ background:#CCC url(0.png) no-repeat; -webkit-background-origin:border;  /*指背景显示的区域 */  margin:30px; } /* 当background-origin的值为border，而background-clip的值为padding时，虽然背景是从边框区域开始绘制的，但因为设定了边框不显示背景，所以本来属于边框的那一部分背景就不会显示出来，就好像背景图片被裁剪了一部分一样*/  div:nth-of-type(2){ width:100px; height:90px; padding:50px; border:30px dashed #000; /* 虚线 */ background:#CCC url(0.png) no-repeat; -webkit-background-origin:border;  /*指背景显示的区域 */ -webkit-background-clip:padding;  /*指定了背景在哪些区域可以显示  */  margin:30px; }</style></head><body><div></div><div></div></body>

效果

0 0