css-背景设置

css-背景设置

背景设置 background: 

background-color: 背景颜色设置 
background-image:url() 背景图片设置
background-repeat: repeat-x | repeat-y | no-repeat;背景平铺设置
background-position: x y;背景定位设置
background-size:; 背景尺寸设置

背景简写形式 官方没有提供固定顺序

background : background-color  background-image  background-position  background-repeat;

颜色单位：

• • • 十六进制色
    • RGB颜色
    • GRBA颜色
    • HSL颜色
    • 英语单词
    • transparent

   十六进制颜色：

十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。

举例说，#0000ff 值显示为蓝色，这是因为蓝色成分被设置为最高值（ff），而其他成分被设置为 0。

div
{
	background-color:#0000ff;
}

RGB颜色：

RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，

可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。

举例说，rgb(0,0,255) 值显示为蓝色，这是因为 blue 参数被设置为最高值（255），而其他被设置为 0。

div
{
	background-color:rgb(255,0,0);
}

 RGBA颜色：

RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。

RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字.

p
{
background-color:rgba(255,0,0,0.5);
}

HSL颜色：

HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。

HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。

Hue 是色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。Saturation 是百分比值；

0% 意味着灰色，而 100% 是全彩。Lightness 同样是百分比值；0% 是黑色，100% 是白色。

div
{
	background-color:hsl(120,65%,75%);
}

英语单词：

div
{
       background-color:red;
}

多背景,多个属性用逗号隔开

background-image:url("img/dog1.jpg"),url("img/dog2.jpg"),url("img/dog3.jpg");

background-position  ：可以设置像素(支持正负数)，可以设置方向和百分比(left=0%,center=50%,right=100%)*/

background-position: 50%;

background-position: 0 0,100% 0;

background-size : width height | cover |contain;

图片宽度或者高度有一边接触到内容的边界，就不再放大，可能没有铺满整个内容

                                                           

   铺满的一个效果，基于比例，可以做延伸，自适应。搭配center使用，一直显示图片中间的部分