1.背景定位:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.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 {
/* 鼠标悬浮时样式 */
}
</style>
</head>
<body>
<div class="box">HHHHHHHHHHH</div>
<script type="text/javascript">
</script>
</body>
</html>
效果图:
2.背景裁剪:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.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 {
/* 鼠标悬浮时样式 */
}
</style>
</head>
<body>
<div class="box">HHHHHHHHHHH</div>
<script type="text/javascript">
</script>
</body>
</html>
效果图:
3.文本裁剪:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.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 {
/* 鼠标悬浮时样式 */
}
</style>
</head>
<body>
<div class="box">Hello World</div>
<script type="text/javascript">
</script>
</body>
</html>