CSS3 背景图像的位置

最新推荐文章于 2023-02-01 10:11:58 发布

凌冰_

最新推荐文章于 2023-02-01 10:11:58 发布

阅读量481

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/hlx20080808/article/details/69554500

版权

CSS3 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

一、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

收藏

觉得还不错? 一键收藏
0
评论
CSS3 背景图像的位置

一、background-origin 指定背景图像的位置区域二、background-clip指定绘图区的背景index.html div:nth-of-type(1){ width:100px; height:90px; padding:50px; border:30px dashed #000; /* 虚线 */ background
复制链接

扫一扫

专栏目录