3. CSS背景--background

@

目录

• background-color
  • 可指定透明度的背景色(rgba)
• background-image
  • 背景渐变(css3)
    • 线性渐变
    • 径向渐变
• background-repeat(背景平铺)
• background-clip : 设置背景的范围
• background-position(背景位置)
• background-origin: 背景图片的偏移量计算的原点
• background-attachment(背景附着)
• background-size(背景缩放--CSS3)
• 背景简写
• 颜色单位

background-color#

• 语法：

background-color:颜色值;   /* 默认的值是transparent :透明的 */

可指定透明度的背景色(rgba)#

• 语法：

background: rgba(0, 0, 0, 0.3);

• 最后一个参数是alpha 透明度 取值范围 0~1之间
• 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
• 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
• 因为是CSS3 ，所以 低于 ie9 的版本是不支持的。

background-image#

• 语法：

background-image : none | url (url) 

/*如下*/
background-image : url(images/demo.png);
/*背景图片后面的地址，url不要加引号。*/

参数	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

• 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
• 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
• 如果背景的图片大于元素，将会一个部分背景无法完全显示
• 如果背景图片和元素一样大，则会直接正常显示

背景渐变(css3)#

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果

渐变是图片，需要通过 background-image 来设置

线性渐变#

线性渐变: 线性渐变，颜色沿着一条直线发生变化; 使用到 CSS linear-gradient() 函数 | 菜鸟教程

linear-gradient(red, yellow, blue); /* 红色是开头， 黄色是中间, 蓝色是结尾, 其他部分为过度区域 */
/* 线性渐变的开头可以指定一个渐变方向, 比如
	to left
	to right
	to bottom
	to top
	
	如果不指定方向，默认方向是 to bottom
	deg: 表示渐变的方向的度数
    turn: 表示圈

    颜色后边的单位表示颜色占有的部分
*/
background-image: linear-gradient(to right, red 50px, yellow 100px, green 120px, orange 200px);

repeating-linear-gradient(): 设置可以平铺的线性渐变

径向渐变#

CSS radial-gradient() 函数 | 菜鸟教程

注意：

• 渐变有兼容性问题，需要加上浏览器前缀, 比如 background: -webkit-linear-gradient(left, red , blue);
• 起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 垂直重上到下

background-repeat(背景平铺)#

• 语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

background-clip : 设置背景的范围#

CSS3 background-clip 属性 | 菜鸟教程 (runoob.com)

可选值	说明
border-box	默认值，背景会出现在边框的下边
padding-box	背景不会出现在边框，只出现在内容区和内边距
content-box	背景只会出现在内容区

background-position(背景位置)#

• 语法：

background-position : length || length

background-position : position || position 

参数	值
length	百分数 | 由浮点数字和单位标识符组成的长度值
position	top | center | bottom | left | center | right 方位名词

• 注意：
  • 必须先指定background-image属性
  • position 后面是x坐标和y坐标。 可以使用 方位名词 或者 精确单位。
  • 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
  • 如果只指定了一个方位名词，另一个值默认居中对齐。
  • 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
  • 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
  • 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

background-origin: 背景图片的偏移量计算的原点#

CSS3 background-origin 属性 | 菜鸟教程 (runoob.com)

可选值	说明
padding-box	默认值，background-position从内边距处开始计算
content-box	背景图片的偏移量从内容区处计算
border-box	背景图片的变量从边框处开始计算

background-attachment(背景附着)#

• 背景附着就是解释背景是滚动的还是固定的
• 语法：

background-attachment : scroll | fixed 

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

background-size(背景缩放--CSS3)#

background-size 属性规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度;

• 单位： 长度(px)|百分比(%)|cover|contain;
• cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
• contain：把图像的宽高等比例扩展，以使其宽度和高度完全适应内容区域
• 如果只写一个，则第二个值默认是 auto

背景简写#

• background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议：

/*
建议书写顺序(重上往下)
background-color
background-image
background-repeat
background-position
background-size
background-origin
background-clip
background-attachment
*/
background: transparent url(image.jpg) repeat-y  scroll center top ;

注意:

• background-size 必须写在 background-position 的后边，并且使用 / 隔开

  background-position/background-size
  

• background-origin background-clip 两个样式 ，orgin要在clip的前边

颜色单位#

1. 在CSS中可以直接使用颜色名来设置各种颜色

   比如：red、orange、yellow、blue、green ... ...

​ 但是在css中直接使用颜色名是非常的不方便

2. RGB值：

• RGB通过三种颜色的不同浓度来调配出不同的颜色
• R red，G green ，B blue
• 每一种颜色的范围在 0 - 255 (0% - 100%) 之间
• 语法：RGB(红色,绿色,蓝色)

3. RGBA:

   • 就是在rgb的基础上增加了一个a表示不透明度

   • 需要四个值，前三个和rgb一样，第四个表示不透明度

     ​ 1表示完全不透明 0表示完全透明 .5半透明

4. 十六进制的RGB值：

   • 语法：#红色绿色蓝色
   • 颜色浓度通过 00-ff
   • 如果颜色两位两位重复可以进行简写 , #aabbcc --> #abc

5. HSL值 HSLA值:

   • H 色相(0 - 360)
   • S 饱和度，颜色的浓度 0% - 100%
   • L 亮度，颜色的亮度 0% - 100%

background-color: red;
background-color: rgb(106,153,85);
background-color: rgba(106,153,85,.5);
background-color: #9CDCFE;
background-color: hsla(98, 48%, 40%, 0.658);