CSS---Background属性
程序员文章站
2022-05-27 09:26:25
...
写给自己
代码中的图片链接，在再次使用时，要记得修改
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS---Background属性</title>
<style type="text/css">
.box{
width: 400px;
height: 200px;
border: 5px solid black;
margin: 50px auto 0;
background-image: url(../images/Snipaste_2020-03-09_19-30-30.png);/* 设置背景图片 */
background-repeat:no-repeat ; /* 设置图片如何平铺*/
background-position:90px 50px; /* 设置图片的位置 ,也可以写像素，基于x轴y轴*/
background-color: #00FFFF;/* 设置背景色，背景色和背景图可以同时设置 */
/* 可以简写为一句话,并且可以设置缺省值
background: url(../images/html06.png) -30px 10px no-repeat #000000; */
}
</style>
</head>
<body>
<div class="box">
hahah
</div>
</body>
</html>
实例代码
需要设置背景图的图片
效果图：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS---背景图定位</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
border: 5px solid black;
margin: 50px auto 0;
/* 讲一个小技巧，设置背景图的时候
可以到浏览器中检查元素CSS位置去调*/
background: url(../images/html07.jpg) -205px -266px no-repeat;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
写个自己
一个小技巧，设置背景图的时候，不易调节
可以到浏览器中检查元素CSS位置去调