<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
#bg{
width: 300px;
height: 300px;
border: solid 1px red;
margin: 0 auto;
background-image: url('img/mv.png');
/* 不重复 */
background-repeat: no-repeat;
/* x方向重复 */
/* background-repeat:repeat-x; */
/* y方向重复 */
/* background-repeat:repeat-y; */
background-position: center;
background-size: 50px 50px;
}
#bg:hover{
background-size: 50% 50%;
}
#sp{
/* border: solid 1px blue; */
margin: 0 auto;
width: 70px;
height: 70px;
background-image: url('img/abc.png');
background-repeat: no-repeat;
/* background-position: center; */
background-position:-70px 0;
}
#sp:hover{
background-position:-140px 0;
}
</style>
</head>
<body>
<div id="bg">
</div>
<div id="sp">
</div>
</body>
</html>-
css html background
最新推荐文章于 2024-01-15 15:49:19 发布