背景颜色设置
background 简写属性,作用是将背景属性设置在一个声明中。可依次设置背景颜色,图像背景及是否重复填充
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。scroll
默认值。/fixed 当页面的其余部分滚动时,背景图像不会移动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
如果要用H:\\ascii码表.gif的路径的话,应该:
body{background-image:url(file:///H|/ascii码表.gif);}
background-position 设置背景图像的起始位置。
left/right/center/bottom/top这几个属性值可以两两组合使用,如果只规定了一个关键词,那么第二个值将是\"center\"。
x% y% 第一个值是水平位置,第二个值是垂直位置;左上角是 0% 0%。右下角是 100% 100%;如果仅规定了一个值,另一个值将是 50%。
x y 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了
一个值,另一个值将是50%。
background-repeat 设置背景图像是否及如何重复。repeat/repeat-x/repeat-y/no-repeat
background-size 规定背景图片的尺寸。
像素/百分比设置宽高
cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
background-clip 规定背景的绘制区域。
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
background-origin 规定背景图片的定位区域。
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。
线性渐变:
background属性:linear-gradinet(开始位置 角度,起始颜色,终止颜色 )
开始位置:渐变开始的位置,属性值可以为百分比/长度/left、right、top、bottom(可组合使用)默认自上向下
角度:渐变终止方向的角度,当开始位置为数值或百分比时候可用
起始颜色......
终止颜色......
重复渐变将属性修改为:repeating-linear-gradinet()
background-image: linear-gradient(to right, red ,blue)
background-image: linear-gradient(to left, red ,blue)
background-image: linear-gradient(0deg,red,blue)
background-image: 60%,orange 80%)
linear-gradient(60deg,red 10% ,blue 30%,green
radial-gradinet()(形状 发散方向,起始颜色,终止颜色)
形状:ellipse(椭圆)/circle(圆形)
发散方向:属性值可以为left、right、top、bottom、center(可组合使用)
大小(半径):属性值可用像素或关键字表示
closest-side:圆心到距离最近的边
farthest-side:圆心到距离最远的边
closest-corner:圆心到距离最近的角
farthest-corner:圆心到距离最远的角
起始颜色......
终止颜色......
重复的径向渐变:repeating-radial-gradinet()
background: radial-gradient( circle at right top,red ,blue,orange)
background: radial-gradient( circle 50px,red ,blue,orange)
background: radial-gradient( circle closest-side,red ,blue,orange)