关于CSS background
CSS背景属性
值 | 描述 |
---|---|
background | 简写属性,作用是将背景属性设置在一个声明中。 |
background-color | 设置元素的背景颜色。 |
background-image | 把图像设置为背景。 |
background-position | 设置背景图像的起始位置。 |
background-repeat | 设置背景图像是否及如何重复。 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
background-color
background-color
属性定义了元素的背景颜色,页面的背景颜色使用在body的选择器中。
常用颜色代码:
1、常用颜色单词,比如green(绿色),yellow(黄色),red(红色),transparent(透明色)等;
2、以#号开头的六个字符组成的颜色代码,比如:#FF0000(红色),#000000(黑色),#F9F900(黄色)等;
3、颜色rgb值,表达方式:rgb(参数1,参数2,参数3),如:“rgb(255,0,0)”,三个参数分别表示r,g,b
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数 | 百分数
如:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
background-color:#6495ed;
}
p{
background-color:#e0ffff;
}
div{
background-color:#ffff00;
}
</style>
</head>
<body>
<h1>Test</h1>
<div>
div
<p>color</p>
div
</div>
</body>
</html>
效果:
background-image
background-image
属性描述了元素的背景图像。默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体。
属性的值
值 | 描述 |
---|---|
url(‘URL’) | 图像的URL |
none | 无图像背景会显示。这是默认 |
linear-gradient() | 创建一个线性渐变的 “图像”(从上到下) |
radial-gradient() | 用径向渐变创建 “图像”。 (center to edges) |
repeating-linear-gradient() | 创建重复的线性渐变 “图像” |
repeating-radial-gradient() | 创建重复的径向渐变 “图像” |
inherit | 指定背景图像应该从父元素继承 |
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
body
{
background-image:url('paper.gif');
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
效果:
background-position
background-position
属性设置背景图像的起始位置。这个属性设置背景原图像的位置,背景图像如果要重复,将从这一点开始。
属性值
值 | 描述 |
---|---|
![]() | 如果仅规定了一个关键词,那么第二个值将是"center"。默认值:0% 0%。 |
x% y% | 第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值,另一个值将是 50%。 |
xpos ypos | 第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值,另一个值将是50%。可以混合使用 % 和 position 值。 |
如:
body
{
background-image:url('/1.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
效果: