背景样式

背景颜色–漂亮的盒子

背景顾名思义就是背后的景物.英文就为background.

我们的家里的墙壁刚装修时候是不是白色的墙壁.

我们的块级盒子例如div刚创建的时候就相当于一面白色透明墙壁.

如果想让这个盒子的背景更加的美观.那我们当一个装修工人,让它背景更加更加丰富把.

颜色表示方法

关键字表示法

RGB函数表示法

RGB是光学三原色,R为红色,G为绿色,B是蓝色,

我们小时候玩调色盘记不记得颜色相互混合可以得到很多颜色呢?

我们用RGB红绿蓝可以组合世界上万色.

RGB接受三个数值,每个数值分别代表红绿蓝的比例,取值范围0~255；

就像是我们挤颜料的浓度,255表示最浓,把颜料挤完了,0表示没有去挤这个颜料.

255,255,0-纯黄 0,255,255 青色 255,0,255紫红色

除了数值还可以接受百分比.

取值范围0~100%. 100%表示这个颜色颜料用的最多,最浓,0%表示没用颜料.

rgba()函数表示法----rgb的加强版

其中末尾的a表示alpha是用于控制透明度的阿尔法通道，

其中1表示完全不透明，0表示完全透明。

也可以写百分比的参数.100%完全不透明,0%完全透明.

十六进制法

就是一个#后面加上6位十六进制的数字构成.

十六进制相对于十进制最大的区别就是逢十六进一.

每个数字有十六种不同的可能,分别是0_9与af,0表示颜色没有,f表示颜色最浓.

这个字符串由3组数字(每组各两位)构成,

这三组数字的每组分别也对应RGB中的红绿蓝颜色.

例如#ff0000对应rgb中的(255,0,0).

2位十六进制代表的也是256种的可能情况,

就是16*16=256;跟RGB一个数字所代表的的可能性是一致的.

RGB一个数值就相当代表十六进制两个数字.

这两者都是可以互相转化的,有专门的的16进制转RGB的工具.

hsl()函数表示法

十六进制和RGB表示法都是计算机如何在显示器上显示颜色,即红绿蓝三原色的混合.

而hsl函数则反映了另一种描述颜色的方式

即色相-饱和度-亮度（hue-saturation-lightness），即HSL模型 颜色取决于色轮红色在顶部的0度,

使用这个语法需要传入三个参数；第一个是角度，第二个和第三个是百分比值，

角度的话绿色在顺时针方向三分之一圆（120度),而蓝色在三分之2圆（240度)

这两个百分比值分别代表饱和度（颜料的量）和亮度。

hsla()函数表达式

它的关系跟rgb()和rgba()关系一样，都可以接受一个透明的参数

opacity透明度

知道了如何控制颜色的透明度,css其实还有另一种方式来控制透明度.就是opacity.

.box{
    width: 300px;
	  height: 300px;
    background-color:blue;   
    opcity:0.5;
    /*让整个元素都变得透明了,包括元素中的内容,深入到了子元素.
 		  而且无法再让子元素变得像之前那样不那么透明.
      实践中,非常适合半透明的文本和背景,实现淡出的效果*/
    rgba(255,0,0,0.5)/*只能让背景颜色变得透明*/
	}
  .smallbox{
		width: 100px;
		height: 100px;
		background-color: green;
	}
 <div class="box">
        <div class="smallbox"></div>
    </div>

但是要注意文本与背景之间的对比度，对比度不高的话.

如果用户在强光下用手机阅读你的网站或者手机屏幕亮度不够,再或者用户视力不佳的情况下可能造成阅读障碍。

**PS:**使用那种颜色表示法没有本质区别,他们只是同一事物不同的方法而已.

---

背景图片

上面我们相当于给墙上重新刷了颜料,贴上了墙纸.

诚然添加背景颜色可能让页面的色彩更加丰富,可是感觉墙壁还是光秃秃的,

这面墙壁只有颜色,看着总感觉少了些什么?

是不是少了些照片.这时候我们就想放置相片了.

我们就想在这些有颜色的墙壁上放上图片了.

我们想使用一些精美的而图片作为元素的背景；

可能是辅助传达思想，可能是一些精巧细致的花纹

这时候有人会问什么时候应该使用背景图片；

大家可能想到HTML中有一个img元素专门往页面中插入内容图片，

那么什么时候插入内容图片，什么时候插入背景图片。

简而言之如果图片从网页中去掉，网页本身仍然有意义，没有什么影响，该图片可以作为背景图片。这个主要是页面和盒子的装裱

但是如果图片从网页中去掉这个图片，网页的观感完全变了样，说明图片是具有意义，那么该图片当作内容图片例如淘宝上的商品之类的.会常常更换的.

背景图片(background-image)格式

除开SVG格式其他图片格式都是位图格式.

位图意味着文件会包含每个像素的,拥有内在的维度(高度和宽度).

对于细节丰富的图片,比如照片和详细示意图,位图很合适

但很多情况下,真正适合的是SVG图形,它的文件是如何在屏幕上绘制图片的指令.

由于是指令,SVG图形可以任意缩放,也可以在任意像素密度的屏幕上清晰呈现,

换句话说,SVG图形永远不会丢失细节,也不会出现锯齿.

---

背景平铺(background-repeat)

这个对花纹图案的而背景图片可能非常有用，对照片就不适合了

CSS新增了space和round关键字.

space 在不缩放的前提下尽可能多的重复图片 round 充分利用容器空间.

游览器的坐标系(唯一)

水平向右x+ 文本书写方向

垂直向下y+ 块级元素排列的方向

游览器左上为坐标原点

---

背景大小(background-size)

我们的图片选择不可能都是正好符合我们盒子的大小

如果我们使用了一张大图覆盖了整个元素盒子.这样的话在小屏幕上图片会进行裁切.

反之如果屏幕特别大,元素边缘就会出现空白,

要避免这种情况.不管页面如何缩放,都让内容保持自己的宽高比就使用background-size.

.box{
		width: 700px;
		height: 700px;
		border:3px solid skyblue;
		background-image: url(1.jpg);
  	background-repeat: no-repeat;
 		background:size:100px 200px;
  /*第一个值表示水平X轴的背景图片大小,Y表示Y轴背景图片大小*/
}

.box{ background-size:100% 100%; }
/*想让元素随着元素缩放而缩放,就必须使用百分比值. 
 注意:百分比不是相对于图片固有大小,而是相对于容器大小.
 但是如果简单的把图片的宽度和高度都设置为百分比值,可能会因为容器高度变化而导致图形变形.*/

.box{ background-size:100% auto; }
/*这里我们让图片宽度(即X值)始终保持为100%,高度等比例放缩.保持了自己规定的宽高比.
  auto自动计算,等比例放大和缩小,都写auto就是原始尺寸*/

只写一个值的话.

.box{ background-size:100%; }
/*第二个值默认是auto*/

但是我们很多时候很有可能不知道图片的宽高比例,很有可能出现留白的情况.

但是单纯用百分比图片又容易变形.

这时候我们还可以去使用一种方法,我们可以去使用关键字

background-size:cover;
/*背景图片会覆盖掉盒子所有空间(不留白),可能会进行裁切*/

background-size:contain;
/*等比例放大和缩小,一条边触碰到边框就停止,图片全部展示不会超出盒子*/

contain这个值会让游览器尽量保持图片的最大化,而不去改变图片的宽高比.

cover保证图片覆盖元素的每一个像素,同时不会变形.

但如果在一个高而窄的元素,元素高度会被填满,图片左右两边会被裁切

而在一个较宽的元素之中,元素宽度会被填满,但图片的上下两边会被裁切.

---

背景位置(backgroun-position)

background-position:x y;定位左上角向右偏移x向左平移y

首先是偏移像素值

background-position:100px 200px;
/*向右平移100px 向下平移200px*/

如果我们去写百分比呢?

百分比值不像绝对数值那样定位背景图片的左上角,而是定位图片中对应的点.

background-position:100% 0%;
/*没有移出盒子,元素的宽度-图片的宽度=100%.*/


盒子的宽度-图片的宽度=100%
500  -  400 = 100px =  100%对应的值;

/*如何让图片在盒子中水平垂直居中*/
background-position:50% 50%;

但是只写一个值会发生什么情况呢?

backgroudn-position:50%;
/*也会垂直水平居中,第二个值默认其实是center关键字.*/

关键字写法.

使用关键字来对齐图片.

在X轴上用left.center,right,

在Y轴上用top,center,bottom.

顺序一般是先X轴再Y轴,

一目了然还能避免错误.虽然它没有规定顺序(可以用top left),

但关键字加上一个长度值的情况下,规则就无效了

.box{backgroun-position:50% center;}/*规则无效*/

这上面都可以混合去进行使用

百分比和具体偏移量

background-position:50% 20px;

还可以写这样.

background-position:right 20px bottom;
/*表示图片靠最右边去显示,但是距离右边有20px*/

也可以去写关键字和百分比

background-position:right 20% bottom;

---

背景原点和裁切(background-orgin和background-clip)

默认背景图片是绘制到元素边框以内的,

div{
    width: 200px;	
    height: 200px;
		padding:20px;
		margin: 20px auto 0;
  	background-color:skyblue;
		border:20px dotted red;
		background-image: url(1.jpg);
		background-repeat: no-repeat;/*写了no-repeat默认以padding-box裁切*/
  	background-origin: border-box;/*图片的位置,不写no-repeat 图片依然会重复.*/
    background-clip:padding-box;/*背景的裁切*/
	}

background-origin和background-clip是CSS3内新增加的属性，其实一个是对背景图片的放置，另一个是对背景图片的剪裁.虽然发布了较长时间但相对而言支持的还是少.

---

背景附着(background-attachment)

除了fixed和scroll,还可以把background-attachment设置为local.

local与scroll的区别在于

scroll会让背景图片相对于元素本身固定.背景本身不移动,里面的内容如文字会移动.

而local则会让背景图片相对于元素中的内容固定,

换句话说如果元素设置了固定大小,且overflow属性设置为scroll或auto的时候,因而其中的内容在超出元素的范围时会出现滚动条,那么这种情况下,在元素内部滚动显示更多内容时候,背景图片会随着内容移动.

body{
	height: 3000px;
	background-image: url(0.jpg);/*花纹图片*/
}
.girl{
	width: 800px;
	height: 200px;
	margin-top:600px;
	background-color: skyblue;
	background-image: url(1.jpg);
  background-repeat: no-repeat;
	background-attachment: fixed;/*让图片贴着视口的左上角排布*/
}

<div class="girl"></div>

复合型和单例型的区别

.box{
	width: 300px;
	width: 100px;
	height: 300px;
	background: green;
  /*1设置盒子背景将所有样式以默认值设置出来,相当于设置了十多次的计算与渲染*/
	background-color: red; 
  /*2设置盒子的背景颜色*/	
 
  
  /*  background:red url(xxx) no-repeat 100px 200px 300px; 
        图片位置  100px 200px大小  宽300px 高auto?
        图片位置  100px center大小  宽200px 高300px?
  /*实际上会出错,要加斜杠才能更好的区分*/
}

多重背景

前面我们假设只用一张图片来作为背景,一般来说当然是这样.但CSS3中支持一个元素设置多个背景图片,因此每个背景属性也就有了相应的多值语法,多个值用逗号分隔.

其中position和size严格按照书写顺序

多重背景按声明的先后顺序上下堆叠,

最先声明的的在最上面,最后声明的在最下面,背景颜色在所有背景图片的下面.

div{
		width:600px;
		height:600px;
		margin:20px auto 0;
		background: url(1.jpg) no-repeat top left,
                url(1.jpg) no-repeat bottom right;
	}

复合型的优秀写法

center/contain

center/cover/更优秀

---

雪碧图

整合了页面所有图标的一个图,一个网站的所有图标都可以压缩到这张图里面,我们请求一张图片即可

**请求:三次握手,四次挥手.**大家想想互联网每一个ip地址对应一台服务器,每一个用户对应一个客户端.一个客户端和服务器建立连接,你怎么保证连接是通畅合法安全的.

为了保证连接,我们规定了TCP/IP协议,这个传输协议规定建立和结束连接的时候.

建立的时候就先问问服务器忙不忙,不忙就响应下请求,服务器说我不忙,我可以响应你的请求,这就是一个打招呼的过程,确实双方的网络状态,这就是三次握手.

最后服务器发送数据给电脑,电脑说我已经接收到数据了,服务器说好的我已经准备不给你发送数据了,电脑也说我也不给发送请求了.这个请求就已经断开了.这就相当于四次挥手.

服务器发送很多次访问请求,1.造成资源浪费2.导致访问速度变慢。

显示雪碧图的条件：

1.需要一个设置好宽和高的容器

2.background-image

background-position：-xpx -ypx;

f12即可进行调试