css3背景图裁剪background-clip

最新推荐文章于 2024-02-06 18:41:34 发布

明日份可乐

最新推荐文章于 2024-02-06 18:41:34 发布

阅读量442

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/ron_wang_/article/details/99684116

版权

本文详细介绍了CSS3的background-clip属性，如何通过此属性控制背景图片的显示区域，包括padding-box, content-box和border-box的效果，以及在图片repeat情况下的表现。" 53896686,5605335,Selenium2Library 关键字分类详解,"['自动化测试', 'Selenium2Library', 'Web测试', '关键字', '网页交互']

摘要由CSDN通过智能技术生成

background-clip控制背景图显示区域如果图片设置了repeat 图片仍然会在border-box里显示

background-clip: padding-box;

	div {
			width: 500px;
            height: 500px;
            padding: 50px;
            border: 20px dotted #ccc;
            background: url(./img/jiufen.jpg) 0 0 no-repeat;
            background-clip: padding-box;
		}

在这里插入图片描述
background-clip: content-box;

	div {
			width: 500px;
            height: 500px;
            padding: 50px;
            border: 20px dotted #ccc;
            background: url(./img/jiufen.jpg) 0 0 no-repeat;
            background-clip: content-box;
		}

在这里插入图片描述
background-clip: border-box;