css背景
css背景
背景颜色
body {background-color:#b0c4de;}
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
css背景颜色透明度
.element {
background: rgba(0, 0, 255, 0.5); /* 设置背景色的透明度 */
}
.element {
background-color: rgba(0, 0, 255, 0.5); /* 半透明的蓝色 */
}
背景颜色渐变
线性渐变（Linear Gradient）
.linear-gradient-background {
background: linear-gradient(direction, color-stop1, color-stop2, ...);
}
direction：渐变的方向，可以是角度（例如45deg）、方向（例如to right、to left、to top、to bottom等）。
color-stop1, color-stop2, ...：渐变中使用的颜色，每个颜色可以通过位置（百分比）来指定其在渐变中的位置，例如0%、100%。
.radial-gradient-background {
background: radial-gradient(shape size at position, start-color, ..., last-color);
}
径向渐变（Radial Gradient）
.radial-gradient-background {
background: radial-gradient(shape size at position, start-color, ..., last-color);
}
shape：渐变的形状，可以是circle（圆形）或ellipse（椭圆形）。
size：渐变的大小，可以是关键字（如closest-side, farthest-side, closest-corner, farthest-corner）或具体的尺寸值（如50% 50%）。
position：渐变的中心点位置，可以是具体的坐标（如at 50% 50%）或关键字（如at center, at top left等）。
start-color, ..., last-color：渐变中使用的颜色，每个颜色可以通过位置（百分比）来指定其在渐变中的位置。
.radial-gradient-background {
background: radial-gradient(circle, red, yellow, green);
}
背景图像
body {background-image:url('paper.gif');}
body{background-image:url('gradient2.png');background-repeat:repeat-x;}水平方向平铺 (repeat-x)
body{background-image:url('img_tree.png');background-repeat:no-repeat;}不让图像平铺background-repeat 属性:
body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:right top;}改变图像在背景中的位置:background-position 属性
body{background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:50% 50%;}百分数值将图像在其元素中居中
style="width: 500px; height: 300px;"
CSS 链接样式
a:link- 正常，未访问过的链接a:visited- 用户已访问过的链接a:hover- 当用户鼠标放在链接上时a:active- 链接被点击的那一刻
当设置为若干链路状态的样式，也有一些顺序规则：
a:hover必须跟在a:link和a:visited后面a:active必须跟在a:hover后面
a:link {color:#FF0000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
链接背景颜色
背景颜色属性指定链接背景色：
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
鼠标形状
常用鼠标形状如下所示：
| 属性值 | 描述 |
|---|---|
| default | 默认光标，箭头 |
| pointer | 超链接的指针，手型 |
| wait | 指示程序正在忙 |
| help | 指示可用的帮忙 |
| text | 指示文本 |
| crosshair | 鼠标呈现十字状 |
