css背景设置

---------颜色表示方法

background: --

1) red  -- 英文单词

2) #ff0000 -- 16进制

3) rgb(255,0,0) --3元色

4) rgb(100%, 0%, 0%) --百分比

---------背景图片起始位置

background-origin: padding-box / border-box / content-box;

图片边框起始  内边距起始  内容起始

---------背景色起始位置

background-clip: boder-box / padding-box / content-box;

边框起始  内边距起始  内容起始

例: 如背景色黄色 边框起始 边框边框也为黄

---------设置背景图片大小

background-size:宽度px 高度px;

background-size: length / percentage / cover / contain;

Value

Description

length

用数值来设定图片的宽度和高度,第一个值为宽度,第二个值为高度,如果只设定一个值,那第二个被设为auto.

percentage

用百分比来设定图片的宽度和高度,第一个值为宽度,第二个值为高度,如果只设定一个值,那第二个被设为auto.

cover

以图片自身的尺寸比例来拉伸图片以封满某个元素.

contain

以图片自身的尺寸比例来拉伸或缩小图片以但某个元素能完全显示此图片

 

---------背景颜色

background/background-color: #000000 - #FFFFFF / red blue green… ;

---------背景插入图片

background-image: url(“地址”)/过度;

例:background-image: -webkit-linear-greadient( -- , -- , -- )

---------背景颜色图片叠加

background: red url() no-repeat -- --;

---------多背景图

background: url(‘ ’) no-repeat -- -- , url(‘ ’) no-repeat -- --/-- --;

1图片 2图片/大小

---------背景色hsl

background: hsl( h , s , l );

h: 色调 0-红 120-绿 240-兰 0-360

s: 饱和度 0-100%

l: 亮度 0-100%  0%为黑

---------背景图片平铺

background-repeat: repeat / no-repeat / repeat-x / repeat-y;

平铺/不平铺/水平平铺/垂直平铺

---------背景图片定位

background-position: 水平px  垂直px / 水平%  垂直% / 关键词(center居中);

top left / top center / top right  -a/b方位前后可互换

left center/ center center / right center

bottom left/ bottom center / bottom right

---------背景关联

background-attachment: scroll / fixed /inherit; 滚动/固定/继承

---------单选边框

border-left/top/right/bottom; 左/上/右/下

---------边框宽度

border-width:0 – 99999px;

border-width:thin medium thick 10px;

上边框是细边框

右边框是中等边框

下边框是粗边框

左边框是 10px 宽的边框

3值: 上 左右 下 

2值: 上下 左右

---------边框样式

border-style: solid / dashed / double / transparent

单实线/虚线/双实线/透明

---------边框颜色

border-color: #000000 - #FFFFFF / red blue green… ;

---------border复合样式写法

border/ border-left/ … : width  style  color; 线宽 样式 颜色

border: 1px  solid  red;

---------background复合样式写法

background: url(“路径”)  repeat  position; 路径 平铺 位置

background: url(“a.jpg”)  no-repeat  center;