17、CSS background背景调整
2022-06-04 本文已影响0人
小黄不头秃
一、背景设置
-
background-color:设置背景颜色
-
background-image：设置背景图片
- 两者可以同时设置
- 如果背景图片过小就会自动平铺
- 图片过大就会无法完全显示
- 如果两者一样大就可以正常显示 -
background-repeat 用来设置背景重复方式
可选值：
- repeat 默认值；
- repeat-x沿x方向重复
- repeat-y沿y方向重复
- no-repeat不重复 -
background-position设置背景图片的位置
可选值：top/bottom left/right、center
也可以通过偏移量来指定图片的位置。
设置背景图片的范围：
-
background-clip
可选值：
- border-box 默认值，背景会出现在边框的下边
- padding-box 背景不会出现在边框，只会出现在内容区和内边距
- content-box 背景只会出现在内容区 -
background-origin 背景图片的偏移量计算原点
- padding-box：默认值
- content-box：内容区
- border-box：边框处开始计算 -
background-size设置背景图片的大小
第一个值表示宽度：第二个值表示高度
如果只指定一个值的话，第二个按比例缩放
- cover：图片将元素铺满
- contain：比例不变图片在元素中完整显示 -
background-attachment:
- scroll默认值，背景图片是跟随元素移动。
-fixed 背景图片不跟随元素移动。 -
background 背景相关属性的所有设置
其中background-position/background-size
二、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景</title>
<style>
.box1{
width: 500px;
height: 500px;
background-color:#bfa ;
background-image: url("../photo/jd1.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
