一、背景
<!DOCTYPE html>
<html>
<head>
<title>背景</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./fontawesome-free-6.2.1-web/css/all.css">
<style>
.box1{
width: 1000px;
height: 1000px;
padding: 10px;
border: 10px red double;
/*
background 背景相关的简写属性，
- 所有背景相关的样式都可以通过该样式设置
- 并且改样式没有顺序要求，也没有哪个属性是必须写的
注意：
- background-size必须写在background-position的后边，并且使用/隔开
- background-position/background-size
- background-origin background-clip 两个样式，background-orgin 要在 background-clip 的前面
*/
background: #bfa url("image/1.png") center center/contain border-box content-box no-repeat;
/* 设置背景颜色 */
background-color: #bfa;
/*
background-image 设置背景图片
- 可以同时设置背景图片和背景颜色，这样背景颜色将会称为图片的背景色
- 如果背景图片小于元素，则背景图片会自动在元素中平铺将元素铺满
- 如果背景图片大于元素，将会有一部分背景无法完全显示
- 如果背景图片和元素一样大，则会正常显示
*/
background-image: url("./image/1.png");
/*
background-repeat 用来设置背景的重复方式
- 可选值：
- repeat：默认值，背景会沿着x轴和y轴双方向重复
- repeat-x：沿着x轴方向重复
- repeat-y：沿着y轴方向重复
- none-repeat：背景图片不重复
*/
background-repeat: no-repeat;
/*
background-position 设置背景图片的位置
- 设置方式：
- 通过 top left right bottom center 几个表示方位的词来设置被背景图片的位置
- 使用方位词必须同时指定两个值，如果只写一个，则第二个默认就是center
- 通过偏移量来指定背景图片的位置
- 水平方向的偏移量 垂直方向偏移量
*/
/*background-position: center;*/
background-position: 100px 100px;
/*
background-clip 设置背景的范围
- 可选值：
- border-box：默认值，背景会出现在边框的下边
- padding-box：背景不会出现在边框，只会出现在内容区和内边距
- content-box：背景只会出现在内容区
*/
background-clip: content-box;
/*
background-origin 背景图片的偏移量的计算原点
- 可选值：
- padding-box：默认值，background-position从内边距处开始计算
- content-box：背景图片的偏移量从内容区处计算
- border-box：背景图片的偏移量从边框处处计算
*/
background-origin: content-box;
/*
background-size 设置背景图片的大小
- 可选值
- 第一个值表示宽度 第二个值表示宽度
- 如果只写一个，则第二个值默认是auto
- cover：图片的比例不变，将元素铺满
- contain：图片比例不变，将图片在元素中完整显示
*/
background-size: 300px;
/*
background-attachment 设置背景图片是否跟随元素移动
- 可选值：
- scroll：默认值，背景图片会跟随元素移动
- fixed：背景会固定在页面中，不会随元素移动
*/
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae excepturi eligendi eos assumenda culpa nihil at itaque asperiores, autem iusto quam quasi quo delectus ea aliquid consequuntur iste accusantium impedit!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae excepturi eligendi eos assumenda culpa nihil at itaque asperiores, autem iusto quam quasi quo delectus ea aliquid consequuntur iste accusantium impedit!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae excepturi eligendi eos assumenda culpa nihil at itaque asperiores, autem iusto quam quasi quo delectus ea aliquid consequuntur iste accusantium impedit!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae excepturi eligendi eos assumenda culpa nihil at itaque asperiores, autem iusto quam quasi quo delectus ea aliquid consequuntur iste accusantium impedit!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae excepturi eligendi eos assumenda culpa nihil at itaque asperiores, autem iusto quam quasi quo delectus ea aliquid consequuntur iste accusantium impedit!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae excepturi eligendi eos assumenda culpa nihil at itaque asperiores, autem iusto quam quasi quo delectus ea aliquid consequuntur iste accusantium impedit!
</div>
</body>
</html>
标签：box,repeat,18,elit,background,背景,背景图片 From： https://www.cnblogs.com/nanoha/p/17003245.html图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载的，用则加载，不用则不加载；