master

分支 (1)

管理

管理

master

h5-c3
/
backimage的使用.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>backimage的使用</title>
	<style>
		.box00{
			width: 360px;
			height: 200px;
			background-image: url(./images/02.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		.box01{
			width: 360px;
			height: 200px;
			background-image: url(./images/02.png);
		}
		.box02{
			width: 360px;
			height: 200px;
			background-image: url(./images/02.png);
			background-repeat:repeat-y;
		}
		.box03{
			width: 360px;
			height: 200px;
			background-image: url(./images/02.png),url(./images/02.png);
			background-repeat:no-repeat;
			background-position: right bottom,left top;
		}
		.box04{
			width: 360px;
			height: 500px;
			background-image: url(./images/03.jpg),url(./images/03.jpg),url(./images/03.jpg);
			background-repeat:no-repeat;
			background-size: 160px;
			background-position:60% 60% ,40% 40%,20% 20%;
		}
		.box05{
			width: 360px;
			height: 500px;
			background-color: #bfa;
			border: 1px solid red;
			border-width: 50px;
			border-image: url(./images/02.png);
			border-image-slice: 30;
			border-image-repeat: round;
			/* border-image-outset: 10px 10px; */
		}
		.box06{
			/* width: 360px; */
			height: 500px;
			display: flex;
			align-items: center;
			/* background-color: #bfa; */
		}
		.box06 p{
			margin-left: 10px;
			/* background-color: #bfa; */
			width: 180px;
		}
		.box06 div{
			width: 40px;
			height: 40px;
			background-image: url(./images/04.png);
			background-repeat: no-repeat;
			text-indent: -999;
		}
		.box06 div:nth-of-type(1){
			background-position: 0 -192px;
		}
		.box06 div:nth-of-type(2){
			background-position: -41px -192px;
		}
		.box06 div:nth-of-type(3){
			background-position: -82px -192px;
		}
		.box06 div:nth-of-type(4){
			background-position: -123px -192px;
		}
		.mod_service_txt{
			overflow: hidden;
			width: 100%;
			height: 42px;
			line-height: 42px;
			font-size: 18px;
			font-weight: 700;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #444;
		}
	</style>
</head>
<body>
	<div class="box00"></div>
	<hr>
	<div class="box01"></div>
	<hr>
	<div class="box02"></div>
	<hr>
	<div class="box03"></div>
	<hr>
	<div class="box04"></div>
	<hr>
	<div class="box05"></div>
	<hr>
	<div class="box06">
		<div></div><p class="mod_service_txt">品类齐全，轻松购物</p>
		<div></div><p class="mod_service_txt">多仓直发，极速配送</p>
		<div></div><p class="mod_service_txt">正品行货，精致服务</p>
		<div></div><p class="mod_service_txt">天天低价，畅选无忧</p>
	</div>
</body>
</html>