<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 500px;
height: 500px;
background-color: blueviolet;
/* 设置背景图片 */
background-image: url(../Exercise(尚)/image/1.jpg);
/*
backgruond-repeat 用来设置背景的重复方式
可选值:
repeat 默认值,背景图片会沿着X、Y轴中方向重复
repeat-x 背景图片沿着X轴重复
repaet-y 背景图片沿着Y轴重复
no-repeat 图片不重复
*/
background-repeat: no-repeat;
/*
background-position 用来设置背景图片的位置
可选值:
-偏移量(像素),水平、垂直的像素
-top、left、right、bottom、center
-使用时,要同时制定两个,若写一个,另一个默认为center
可以把背景想象成一个九宫格
*/
background-position: left center;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
16.1背景——html
最新推荐文章于 2024-07-25 11:52:08 发布