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>

 

 
 
posted @ 2020-11-25 00:55  yang_nick  阅读(166)  评论(0编辑  收藏  举报