背景有以下属性可以操作,直接上代码:
<style type="text/css">
#box {
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: #f1f2f2;
background-image: url(img/img.gif);
background-repeat: no-repeat;
background-position: 10% 10%;
background-attachment:fixed;
}
</style>
<body>
<div id="box"></div>
</body>
1.background-color 背景颜色,有三种语法
①关键字:红色,蓝色,黄色,绿色......
②rgb():rgb(0,0,0,0.5)
③十六进制:#f1f2f2
2.background-image 背景图片,后面跟上图片的路径
background-image:url(图片路径);
例如:background-image:url(“c:/image.jpg”);
3.background-repeat背景图是否平铺,这一属性默认值为repeat
还有repeat-x横向平铺
repeat-y纵向平铺
不重复不平铺
4.background-position背景图位置,这一属性有三种语法(关键字x / y,数值,百分比)
关键字x y
left(居左)top(居顶)
right(居右)bottom(居底)
center(居中)center(居中)
数值:10px 30px
x从元素左侧向右移动的距离
y从元素顶部向下移动的距离
百分比:20%30%
x从元素左侧向右移动的距离
y从元素顶部向下移动的距离
例如:背景位置:10%20%
5.background-attachment 背景图是否 跟随滚动条滚动
这一属性有两个值:
scroll 随着滚动条滚动
fixed 不随着滚动条滚动
设置了 fixed 之后,图片位置会根据可视区的左上角来计算
6. 以上几个属性可以合并写在一起进行设置,中间用空格隔开
背景:背景颜色 背景图片路径 重复值 X轴偏移量 Y轴偏移量
例如: 背景:#f1f2f2 url(“img / img.gif”)no-repeat 20px 20px fixed;
最后,动起手来敲敲代码QWQ