本文深入探讨了CSS中的背景定位与裁剪技术，包括`background-origin`和`background-clip`属性的使用，以及如何通过`-webkit-background-clip:text`实现文本与背景图片的结合。示例代码详细展示了不同设置下的效果，帮助开发者更好地理解和应用这些技术。
1.背景定位：
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
background-image: url("img/lzx.JPEG");
background-repeat: no-repeat;
border-top: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid red;
border-right: 30px solid red;
padding: 50px;
/*
background-origin: padding-box|border-box|content-box;
padding-box背景图像相对于内边距框来定位。
border-box背景图像相对于边框盒来定位。
content-box背景图像相对于内容框来定位。
*/
background-origin: border-box;
/*background-origin: content-box;*/
background-position: -50px 0;
}
.box:hover {
/* 鼠标悬浮时样式 */
}
效果图：
2.背景裁剪：
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 100px;
height: 100px;
background-image: url("img/lzx.JPEG");
background-repeat: no-repeat;
border: 30px solid transparent;
padding: 50px;
/*
background-clip: border-box|padding-box|content-box;
border-box背景被裁剪到边框盒。
padding-box背景被裁剪到内边距框。
content-box背景被裁剪到内容框。
*/
background-clip: content-box;
background-clip: padding-box;
background-clip: border-box;
}
.box:hover {
/* 鼠标悬浮时样式 */
}
效果图：
3.文本裁剪：
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 800px;
height: 100px;
background-color: orange;
/*该属性是webkit内核，blink内核浏览器特有属性，其他浏览器不支持*/
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: url("img/lzx.JPEG");
font-size: 72px;
font-family: arial, "Hiragino Sans GB", "Microsoft Yahei", 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti;
}
.box:hover {
/* 鼠标悬浮时样式 */
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
