背景
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
padding: 10px;
/*
background-clip设置显示区域
可选值
border-box背景延伸到边框的下边
padding-box背景会设置到内边距
centent-box背景只会设置到内容区
*/
/* background-clip: content-box; */
/* 背景颜色 */
background-color: #bfa;
/*
background-image设置背景图片
背景颜色和背景图片可以同时设置，这样颜色将会作为图片的底色显示
背景图片默认会在网页中水平垂直双方向重复
设置背景图片时，如果图片小于元素，则图片默认会从元素的左上角开始平铺
如果图片大于元素，则多余部分不会显示
*/
background-image: url(img/1.png);
/*
background-repeat设置背景图片的重复方式
可选值
repeat默认值，双方向重复
repeat-x水平方向平铺
repeat-y垂直方向平铺
no-repeat不重复
*/
background-repeat: no-repeat;
/*
background-size可以用来设置图片的尺寸
需要两个值作为参数：宽度 高度
可选值
contain完整显示背景图片，可能会有位置没有图片
cover使图片将元素填满，可能有部分图片从元素中溢出
*/
/* background-size: 200px 200px; */
/* background-size: 100% auto; */
/* background-size: auto 100%; */
/* background-size: contain; */
/* background-size: contain; */
/*
background-position用来设置背景图片的位置
设置方式
1.可以通过位置关键字来设置位置
top left right bottom center
2.可以通过指定偏移量来设置背景图片的位置
第一个值，水平反向偏移量，正值，背景向右移动，负值向左移动
第二个值，垂直方向偏移量，正值向下走，负值向上走
*/
/* background-position: top left; */
/* background-position: top right; */
/* background-position: top center; */
/* background-position: center; */
/* background-position: top; */
background-position: 200px 0;
/*
background是背景的简写属性，所有的背景相关的样式都可以在background中设置，并且没有
顺序要求
*/
/* background: url(img/1.png) #bfa no-repeat 100px 100px/200px 200px content-box border-box fixed; */
}
style>
head>
<body>
<div class="box">div>
body>
html>