背景样式

RGB函数表示法

RGB接受三个数值,每个数值分别代表红绿蓝的比例

r red , g green , b blue

每一种颜色的范围在0-255 ( 0% - 100%)之间

语法： rgb(红色 ， 绿色， 蓝色)

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

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

就是在rgb的基础上增加了一个a

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

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

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

十六进制法

就是一个#后面加上6位十六进制的数字构成.(十六进制相对于十进制最大的区别就是逢十六进一.)

语法:#红色（2位）绿色（2位）蓝色（2位）

每个数字有十六种不同的可能,

分别是0~9与 a~f , 0表示颜色没有, f表示颜色最浓.

每两位颜色也对应RGB中的红绿蓝颜色.

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

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

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

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

如果颜色两位两位的重复可以进行简写 #aabbcc --> #abc

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

hsl()函数表示法

H 色相 （0deg - 360deg）

S 饱和度 颜色的浓度 （0 -100%）

L 亮度 颜色的亮度（0 - 100%）

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

hsla()函数表达式

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

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

opacity透明度

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

取值 0-1 0表示完全透明 1表示完全不透明

内部所有内容都会变得透明

.box{
     width: 300px;
	 height: 300px;
     background-color:blue;   
     opcity:0.5; 
}
  .smallbox{
	width: 100px;
	height: 100px;
	background-color: green;
}
 <div class="box">
       <div class="smallbox"></div>
  </div>

元素显示状态(visibility)

visibility: visible 子元素显示

visibility:hidden; 不显示隐藏,渲染占据空间

display:none; visibility:hidden; opacity:0;之间的区别

一、空间占据

display:none隐藏后不占据额外空间，它会产生重排（回流）和重绘。 重新排列

visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。

二、子元素继承

display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了

visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来

opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 1使其重新显示

三、事件绑定

display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；

visibility:hidden 元素上绑定的事件也无法触发；

opacity: 0 元素上面绑定的事件是可以触发的。

四、过渡动画

transition对于display肯定是无效的，大家应该都知道；

transition对于visibility也是无效的；

transition对于opacity是有效，大家也是知道的:).

---

背景图片(background-image)格式

background-image:url(“路径”)；插入图片

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

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

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

---

背景平铺(background-repeat)

如果背景图片小于元素大小,则背景图片会自动在元素中平铺将元素铺满

如果背景的图片大于元素,将会一个部分背景无法完全显示

如果背景图片和元素一样大,则会直接正常显示

background-repeat

​ 可选值

​ repeat 默认值 背景会沿着x轴 y轴 方向重复

​ repeat-x 沿着x轴方向重复

​ repet-y 沿着y轴方向重复

​ no-repeat 背景图片不重复

游览器的坐标系(唯一)

水平向右x+

垂直向下y+

游览器左上为坐标原点

---

背景大小(background-size)

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

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

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

要避免这种情况.让背景图片大小变的理想就使用background-size.

​ background-size:设置图片的大小

​ 第一个值表示宽度

​ 第二个值表示高度

​ 如果只写一个，则第二个默认是auto

.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)

通过使用关键字来调整图片位置.

在X轴上用left.center,right方位

在Y轴上用top,center,bottom方位

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

使用方位词必须要同时指定两个值，如果只写一个值第二个值默认center

通过偏移量来制定背景图片的位置

backgroun-position：x y； 水平方向偏移量 垂直方向偏移量

单位

​ 1.像素px单位

​ 2.百分比单位调整

百分比值不像绝对数值那样定位背景图片的左上角。

而是定位图片中对应的点.

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


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

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

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

百分比和具体偏移量

background-position:50% 20px;

还可以写这样.

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

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

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

---

背景原点(background-origin）

规定了在图片不平铺的情况下，背景图片的左上角顶点的初始位置

background-origin 背景图片的基点

​ 可选值：

​ padding-box 默认值 背景图片从内边距左上角开始

​ content-box 背景图片相对于内容区左上角开始

​ border-box 背景图片相对于边框左上角开始

---

背景裁切（background-clip)

​ background-clip设置背景的出现的范围

​ 可选值：

​ border-box默认值 背景会出现边框的下边

​ padding-box 背景不会出现在边框，只会出现在内容 区和内边距

​ content-box背景只会出现在内容区

溢出（overflow）

如果子元素大小超过了父元素，则子元素会从父元素溢出，使用overflw属性来设置父元素如何处理溢出的子元素

​ 可选值

​ visible 默认值 子元素会从父元素中溢出 在父元素外部的 位置显示

​ hidden 溢出内容将会被裁剪不显示

​ scroll 生成两个滚动条来查看完整的内容

​ auto 根据需要生成滚动条

背景附着(background-attachment)

background-attachment决定背景是在视口中固定的还是随包含它的区块滚动的

​ 可选值：

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

​ local 背景图片相对于元素中的内容固定,

​ fixed：背景相对于视口固定。即使一个元素拥有滚动机制， 背景也不会随着元素的内容滚动。

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>

background简写属性

backgroud-color

background-image

background-repeat

backgroun-position

background-size

background-orgin

background-clip

background-attachment

background背景相关的简写属性，所有背景相关的样式都可以通过改样式设置

​ 并且该样式没有顺序要求，也没有哪个属性是必须写的

注意：

​ background-position必须写在background-size前面 ， 并且用/隔开

​ ----- background-position / background-size

​ background-origin background-clip两个样式 ， orgin要在clip的前面

多重背景

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

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

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

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

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

复合型的优秀写法

center/contain

center/cover/更优秀

---

雪碧图（CSS-sprite）

特点

整合了页面所有图标的一个图,请求一次将多个图片加载进页面，降低请求次数，加快访问速度，提升用户体验

请求:三次握手,四次挥手.

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

显示雪碧图的条件：

1.测量图标大小根据测量结果，创建好一个宽和高的容器。

2.background-image 引入图片

background-position：-xpx -ypx;

f12即可进行调试