CSS背景颜色
CSS的背景背景:背景支持为元素添加背景颜色和背景图片,接下里介绍背景相关的属性。①background-color:背景颜色。②background-image:用于设置背景图片。注意:如果同时设置背景颜色(background-color)和背景图片(background-image),背景颜色会被背景图片覆盖。该属性需要使用url()函数指定图片地址,图片的地址既可以是相对的,也可以是绝对的
CSS的背景
背景:背景支持为元素添加背景颜色和背景图片,接下里介绍背景相关的属性。
①background-color:背景颜色。
②background-image:
用于设置背景图片。注意:如果同时设置背景颜色(background-color)和背景图片(background-image),背景颜色会被背景图片覆盖。
该属性需要使用url()函数指定图片地址,图片的地址既可以是相对的,也可以是绝对的。
③background-repeat:
用于设置对象的背景图片是否平铺(重复显示)。在指定该属性之前,必须先指定背景图片(background-image)
该属性有repeat(纵横同时重复),no-repeat(不重复),repeat-x(x轴方向重复),repeat-y(y轴方向重复) 4个值。
④background-position:
用于控制背景图片的位置。background-position有5个关键字值分别是:top,left,bottom,right,center。
可以通过任意两个关键字组合来定位。也可以通过百分比来定位。
也可以通过像素大小进行定位。例如:background-position:50% 50%.第一个百分比对应横坐标,第二个百分比对应纵坐标。
⑤background-attachment:
设置背景图片是随对象内容滚动还是固定。在指定该属性之前,必须先指定背景图片。
该属性的两个值:scroll(默认),fixed(固定)。
⑥background:
这是一个复合属性,可以同时设置背景颜色、背景图片、背景重复、背景位置等。
CSS3还可以给元素背景添加多个背景图片。
CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
· background-color 背景颜色
· background-image 背景图像
· background-repeat 设置背景图像在页面的水平或者垂直方向平铺与否。
· background-attachment 背景图像是否固定或者随着页面的其余部分滚动
· background-position 背景图像定位
1、background-color属性值可以用十六进制、英文、rgb()
body { background-color:yellow; }
h1 { background-color:#00ff00; }
p { background-color:rgb(255,0,255); }
上面三种写法都是可以的
2、background-image
body {
background-image:url(‘paper.gif’);
background-color:#cccccc;
}
url()指向背景图像的文件路径
元素的大小包括内边距,不包含边框;
默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向。
属性值
值 | 说明 |
---|---|
url(‘URL’) | 图像的URL |
none | 无图像背景会显示。这是默认 |
linear-gradient() | 创建一个线性渐变的 “图像”(从上到下) |
radial-gradient() | 用径向渐变创建 “图像”。 (center to edges) |
repeating-linear-gradient() | 创建重复的线性渐变 “图像”。 |
repeating-radial-gradient() | 创建重复的径向渐变 “图像” |
inherit | 指定背景图像应该从父元素继承 |
3 background-repeat 设置背景图像如何平铺
属性值
值 | 说明 |
---|---|
repeat | 背景图像将向垂直和水平方向重复。这是默认 |
repeat-x | 只有水平位置会重复背景图像 |
repeat-y | 只有垂直位置会重复背景图像 |
no-repeat | background-image不会重复 |
inherit | 指定background-repea属性设置应该从父元素继承 |
4 background-position设置背景图像的定位
属性值
值 | 描述 |
---|---|
left top left center left bottom right top right center right bottom center top center center center bottom | 如果仅指定一个关键字,其他值将会是"center" |
x% y% | 第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%。 。默认值为:0%0% |
xpos ypos | 第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是像素(0px0px)或任何其他 CSS单位。如果仅指定了一个值,其他值将是50%。你可以混合使用%和positions |
inherit | 指定background-position属性设置应该从父元素继承 |
5 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
值 | 描述 |
---|---|
scroll | 背景图片随着页面的滚动而滚动,这是默认的。 |
fixed | 背景图片不会随着页面的滚动而滚动。 |
local | 背景图片会随着元素内容的滚动而滚动。 |
initial | 设置该属性的默认值。 阅读关于 initial 内容 |
inherit | 指定 background-attachment 的设置应该从父元素继承。 阅读关于 inherit 内容 |
background-color: aqua;/背景颜色/ | |
---|---|
background-image:url("…/image/img1.jpg");/背景图像/ | |
background-repeat:no-repeat;/背景是否平铺/ | |
background-position: 20px 300px;/背景图像定位/ | |
background-size: 50px 50px;/背景图像大小/ | |
background-attachment:fixed;/背景图像是否滚动 这里设置的相对于浏览器固定/ |
背景渐变色 | |
---|---|
background-image: linear-gradient(to top right, red 15%,green 85%) | |
background-image:radial-gradient(circle at 20% 10%,red,green) |
background-color | 设置背景颜色 |
---|---|
background-image:url("…/image/img1.jpg");/设置背景图像/ | |
background-repeat: no-repeat;/设置背景不重复/ | |
background-size: 200px 200px;/设置背景图像大小/ | |
background-position:center 230px;/* 相对于水平、垂直方向定位 设置背景图像定位*/ | |
background-repeat:round;/设置背景沿X轴重复/ |
更多推荐
所有评论(0)