CSS手册

3. CSS背景

1. 颜色

body {background-color:#b0c4de;}

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"
默认transparent透明
从父元素继承inherit;

2. 图像背景 background-image

①.图像 url

body {background-image:url('paper.gif');}

水平方向平铺 background-repeat:repeat-x;
不平铺 background-repeat:no-repeat;
设置背景图像的起始位置 background-position:right top;
简写属性

body {background:#ffffff url('img_tree.png') no-repeat right top;}

背景颜色 background-color
指定一个固定的背景图像：background-attachment:

1.fixed 背景图片不会随着页面的滚动而滚动。

2.scroll 默认背景图片随着页面的滚动而滚动

3.local 背景图片会随着元素内容的滚动而滚动

②. linear-gradient 创建一个线性渐变的 "图像"(从上到下)

/*direction渐变方向，渐变起止颜色*/

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

/* 从上到下，蓝色渐变到红色 */

linear-gradient(blue, red);

/* 渐变轴为45度，从蓝色渐变到红色 */

linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */

linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */

linear-gradient(0deg, blue, green 40%, red);

/*透明度rgb*/

linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

③. radial-gradient() 函数用径向渐变创建 "图像"。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape 确定圆的类型:ellipse 默认指定椭圆形的径向渐变; circle ：指定圆形的径向渐变
size 定义渐变的大小 farthest-corner (默认) 指定径向渐变的半径长度为从圆心到离圆心最远的角;

closest-side ：从圆心到离圆心最近的边;closest-corner ：从圆心到离圆心最近的角;farthest-side ：从圆心到离圆心最远的边
position 定义渐变的位置圆心的纵坐标值。center,top,bottom.

radial-gradient(red 5%, green 15%, blue 60%);

radial-gradient(circle, red, yellow, green);

radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);

④ repeating-linear-gradient() 函数创建重复的线性渐变 "图像"。

repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

/*angle渐变角度方向，side水平(left 或 right)，cornor垂直（top 或bottom）*/

repeating-linear-gradient(90deg, red, blue 7%, green 10%);

⑤. repeating-radial-gradient(red, yellow 10%, green 15%);

1.cursor属性鼠标指针放在一个元素边界范围内时所用的光标形状

url 需使用的自定义光标
default 默认光标
auto 默认浏览器设置的光标
crosshair 十字线
pointer 一只手
move 指示某对象可被移动。
e/s/n/w/ne/nw/se/sw-resize 矩形框的边缘可向某方向移动
text 指示文本
wait 指示程序正忙沙漏
help 指示可用的帮助问号或者气球

2. overflow属性

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

overflow-x/y属性

overflow-x指定如何处理右边/左边边缘的内容溢出元素的内容区域
overflow-y指定如何处理顶部/底部边缘的内容溢出元素的内容区域

visible,hidden,scroll,auto

no-display 如果内容不适合内容框，则删除整个框
noontent 如果内容不适合内容框，则隐藏整个内容

巴特西

CSS手册

3. CSS背景

1. 颜色

2. 图像背景 background-image

①.图像 url

②. linear-gradient 创建一个线性渐变的 "图像"(从上到下)

③. radial-gradient() 函数用径向渐变创建 "图像"。

④ repeating-linear-gradient() 函数创建重复的线性渐变 "图像"。

⑤. repeating-radial-gradient(red, yellow 10%, green 15%);

1.cursor属性鼠标指针放在一个元素边界范围内时所用的光标形状

2. overflow属性

overflow-x/y属性

最新文章

热门文章

巴特西

CSS手册

3. CSS背景

1. 颜色

2. 图像背景 background-image

①.图像 url

②. linear-gradient 创建一个线性渐变的 "图像"(从上到下)

③. radial-gradient() 函数用径向渐变创建 "图像"。

④ repeating-linear-gradient() 函数创建重复的线性渐变 "图像"。

⑤. repeating-radial-gradient(red, yellow 10%, green 15%);

1.cursor属性 鼠标指针放在一个元素边界范围内时所用的光标形状

2. overflow属性

overflow-x/y属性

最新文章

热门文章

1.cursor属性鼠标指针放在一个元素边界范围内时所用的光标形状