<!DOCTYPE html>
<html lang="ch">
<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>背景1</title>
<style>
.box1 {
width: 500px;
height: 500px;
/*
background-color 设置背景颜色
*/
background-color: #bfa;
/*
background-image 设置背景图片
- 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景
- 如果图片的大小小于元素大小,则图片默认在元素中平铺铺满
- 如果图片的大小等于元素大小,则图片正常显示一张
- 如果图片的大小大于元素大小,则图片部分显示
*/
background-image: url("./imgs/daina.jpg");
/*
background-repeat 设置背景的重复方式
可选值:
repeat 默认值,背景会沿x、y轴双方向重复
repeat-x 沿x轴方向重复
repeat-y 沿y轴方向重复
no-repeat 不重复(只显示一张)
*/
background-repeat: no-repeat;
/*
background-position 用来设置图片的位置
设置方式
通过 top left right bottom center几个表示方位的词来设置背景图片的位置
使用这个必须同时指定两个值,如果只写一个则第二个默认就是center
通过偏移量来指定背景图片的位置
水平方向的偏移量 垂直方向的偏移量
*/
/* background-position: bottom center; */
background-position: 20px 20px;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
68背景(一)
最新推荐文章于 2021-06-21 12:53:27 发布