css background-属性学习
自己立的flag，怎么着也要完成吧。
背景图片呢其实用的挺多的，但是这个属性里面的很多
今天就来学习background吧。
这里面其实是有8个属性：
根据w3c的说法，这个属性是8个不同属性的简写，分别是下面的：
1，background-color =》设置背景颜色
2，background-position =》规定背景图片的位置
根据文档呢，取值还挺多的
可以有三种类型的值
1，固定单词，比如，top/center/bottom left/center/right,其实自己试了一下，这里并不区谁在前谁在后。看单词就知道在什么地方了
如果只指定了一个单词，那么第二个默认是center
2，百分比 x% y% ,从x,y的顺序就可以
3，就是具体数值 10px 20px这种 这个和百分数是可以相互转化的，有计算公式。
3，background-size =》规定背景图片的尺寸
4，background-repeat =》规定如何重复背景图
5，background-origin =》规定背景图的定位区域
6，background-clip =》规定背景的绘制区域
7，background-attachment =》规定背景图像是否固定或者随着页面滚动
8，background-image =》规定要使用的背景图像
然后呢，自己写了两个属性的demo，分别数background-size和background-position
1,
.father {
width: 1000px;
height: 1000px;
background: url("./banner.jpg");
border: 1px solid #000;
background-repeat: no-repeat;
/* background-position: 250px 0; */
/* background-position: 100% 0; */
/* background-position: 10% 0; */
background-position: 25px 0;
/* background-position: right bottom; */
/* background-position: right bottom; */
/* background-position: top right; */
}
/* 之前还真是没有注意到这个计算公式哈
x：(1000px - 750px) * (100%) = 250px * 1 = 250px
也就是说呀
x% y%：表示使用百分比定位，是将图像本身（x%, y%）的那个点，与背景区域的（x%, y%）的那个点重合。最终得到背景图像起始位置坐标的计算公式为：
x = (对象的宽度 - 图像的宽度) * x%;
y = (对象的高度 - 图像的高度) * y%;
*/
2,
.father2 {
width: 1000px;
height: 2000px;
background: url("./banner.jpg");
border: 1px solid #000;
background-repeat: no-repeat;
/* background-size: contain; */
/* background-size: 10% 10%; */
background-size: 200px 30px;
/*
取值有4种
1，cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
2,contain 把图像图像扩展至最大尺寸，以使其宽度或者高度完全适应内容区域。
3，百分比 以父元素的百分比来设置背景图像的宽度和高度。图像可能会变形
4,设置背景图像的高度和宽度, 3，4这两个就很像了，就是直接设置背景图的大小，图像很可能会变形。
*/
}
这样子以来基本就很清晰了吧，至少比之前要明白多了，通过上面来看呢，都有直接设置具体值和设置百分比，其实这两意思基本一致。未完待续。。。。
把自己学习的demo帖进去把，方便自己以后来查看代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"/> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 6 <title>Document</title> 7 <style> 8 *{ 9 box-sizing: border-box; 10 } 11 body{ 12 background: url("./banner.jpg") no-repeat; 13 background-attachment: fixed; 14 } 15 .father { 16 width: 1000px; 17 height: 600px; 18 background: url("./banner.jpg"); 19 border: 1px solid #000; 20 /*background-repeat: no-repeat;*/ 21 /*background-repeat: repeat;*/ 22 background-repeat: repeat-y; 23 /* background-position: 250px 0; */ 24 /* background-position: 100% 0; */ 25 /* background-position: 10% 0; */ 26 background-position: 25px 0; 27 /* background-position: right bottom; */ 28 /* background-position: right bottom; */ 29 /* background-position: top right; */ 30 } 31 32 /* 之前还真是没有注意到这个计算公式哈 33 x：(1000px - 750px) * (100%) = 250px * 1 = 250px 34 也就是说呀 35 x% y%：表示使用百分比定位，是将图像本身（x%, y%）的那个点，与背景区域的（x%, y%）的那个点重合。最终得到背景图像起始位置坐标的计算公式为： 36 x = (对象的宽度 - 图像的宽度) * x%; 37 y = (对象的高度 - 图像的高度) * y%; 38 */ 39 40 .father2 { 41 width: 1000px; 42 height: 600px; 43 background: url("./banner.jpg"); 44 border: 1px solid #000; 45 background-repeat: no-repeat; 46 /*background-repeat: repeat;*/ 47 /* background-size: contain; */ 48 /* background-size: 10% 10%; */ 49 background-size: 200px 30px; 50 /* 51 取值有4种 52 1，cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 53 2,contain 把图像图像扩展至最大尺寸，以使其宽度或者高度完全适应内容区域。 54 3，百分比 以父元素的百分比来设置背景图像的宽度和高度。图像可能会变形 55 4,设置背景图像的高度和宽度, 3，4这两个就很像了，就是直接设置背景图的大小，图像很可能会变形。 56 */ 57 } 58 .father3{ 59 width: 800px; 60 height: 600px; 61 background: url("./banner.jpg"); 62 border: 10px dashed #000; 63 background-repeat: no-repeat; 64 background-origin: border-box; 65 /*background-origin: content-box;*/ 66 /*background-origin: padding-box;*/ 67 padding: 20px; 68 } 69 .father4{ 70 width: 600px; 71 height: 900px; 72 overflow: scroll; 73 background: url("./banner.jpg"); 74 border: 10px dashed #000; 75 background-repeat: no-repeat; 76 padding: 20px; 77 /*background-origin: border-box;*/ 78 /*background-clip: border-box;*/ 79 /*background-attachment: scroll;*/ 80 /*background-clip: padding-box;*/ 81 /*background-clip:content-box;*/ 82 } 83 </style> 84 </head> 85 <body> 86 <p>background属性的学习</p> 87 <!-- 88 根据w3c的说法，这个属性是8个不同属性的简写，分别是下面的： 89 1，background-color =》设置背景颜色 90 2，background-position =》规定背景图片的位置 91 根据文档呢，取值还挺多的 92 可以有三种类型的值 93 1，固定单词，比如，top/center/bottom left/center/right,其实自己试了一下，这里并不区谁在前谁在后。看单词就知道在什么地方了 94 如果只指定了一个单词，那么第二个默认是center 95 2，百分比 x% y% ,从x,y的顺序就可以 96 3，就是具体数值 10px 20px这种 这个和百分数是可以相互转化的，有计算公式。 97 3，background-size =》规定背景图片的尺寸 98 4，background-repeat =》规定如何重复背景图 99 有5种取值,这个属性相对是比较好理解的 100 1，repeat (默认值)，水平方向和垂直方向重复 101 2，repeat-x 水平方向重复 102 3，repeat-y 垂直方向重复 103 4，no-repeat 不重复 104 5,inherit 继承父元素的background-repeat属性 105 5，background-origin =》规定背景图的定位区域 106 有三种取值,这几个值都很好理解 107 1，border-box 相对边框盒子定位 相对于边框盒子定位，从边框盒子左上角开始，当画一条粗的虚线边框时是和很明显的 108 2,content-box 相对内容盒子定位 相对于内容盒子 109 3,padding-box 相对内边距框定位 相对于padding盒子，其实就是不包含边框的部分开始 110 看了张鑫旭的文章，主要是画了图之后就很清晰了， 111 6，background-clip =》规定背景的绘制区域 112 1，border-box 113 2,content-box 114 3,padding-box 115 通过测试，这个属性的取值和origin的取值是一样的,不过呢，这个得意思是裁剪，主要针对图片比盒子大的情况 116 117 7，background-attachment =》规定背景图像是否固定或者随着页面滚动 118 这个属性，一次都没有实际使用过 119 取值有三个 120 1，scroll (默认) 121 2,fixed 这个不会滚动，有时候设置其实感觉还是挺有意思的。 122 3,inherit 123 124 8，background-image =》规定要使用的背景图像 125 126 下面来一一讲解一下吧 127 --> 128 <!-- 测试 background-position--> 129 <div class="father"></div> 130 <!-- 测试 background-size --> 131 <div class="father2"></div> 132 <!--测试background-origin--> 133 <div class="father3"></div> 134 <!--background-clip--> 135 <div class="father4"></div> 136 </body> 137 </html>
