背景属性
1.作用
设置背景颜色和背景图片
2.背景色
属性
background-color:值;
取值
任何合法性的颜色值
3.背景图片
属性
background-image:url();
4.背景属性
background-repeat:值
取值
no-repeat 不重复
repeat 重复(默认)
repeat-x 水平重复
repeat-y 垂直重复
div{width:8000px;
height:3000px;
border:1px solid purple;
background-image:url(timg.jpg);
background-repeat:repeat-x;}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.背景图片尺寸
属性
background-size:值;
取值
1.值1 值2;
宽 高
% %
2.cover
覆盖 将背景图片等比缩放
直到背景能覆盖元素的所有区域
3.contain
包含 将背景图等比缩放
直到背景图像碰到右边或者下边时,停止缩放
导致图片显示不全
<style>
div{width:800px;
height:300px;
border:1px solid purple;
background-color:grey;
background-image:url(timg.jpg);
background-size:contain;
/*contain等比缩放 */
/*cover超过*/
/*1.值1 值2; 宽 高 */
background-repeat:no-repeat; }
</style>
6.背景定位
1.作用
改变背景图像在元素中的位置
2.语法
background-position:
取值
1. x y;
x:水平偏移距离
取值为正 往右偏
取值为负 往左偏移
y:垂直偏移距离
取值为正 往下偏
取值为负 往上偏
2.px px;
3.关键字
x:left/center/right:
y:top/center/bottom
#d1
{
width:80%;
height:120px;
border:1px solid gray;
margin-bottom:20px;
}
#d1-1
{
width:75px;
height:15px;
background-image: url(iconlist_1.png);
background-position: -108px -240px;
background-repeat: no-repeat;
margin:10px 20px;
}
#d1-2
{
width: 80%;
height:110px;
border-top: 1px solid red;
margin:10px 20px;
}
#d2 a{
text-decoration:none;
border:1px solid grey;
padding:10px;
border-radius: 10%;
}
#d2 a:hover{
text-decoration: underline;
background-color: green;
}
#d2 #a1{
border:none;
color:black;
}
#d2 #a1:hover{
text-decoration: none;
background-color: white;
}
背景定位background-position首先
background-image: url(iconlist_1.png);
background-position: -108px -240px;
background-repeat: no-repeat;
确定背景图像,定位位置,和背景重复
7.背景图片固定
属性:
background-attachment:
取值
1.fixed:背景固定不动
2.scroll:背景滚动
body{
background-image: url(timg.jpg);
background-attachment: fixed;
/*取值:fixed背景固定,p标签内容滑动*/
/*取值:scroll背景固定,p标签内容滑动*/
background-repeat: no-repeat;
}
使用:在css样式中写入body标签内的样式先确定背景图片位置和背景固定。
背景缩写
background:url() repeat positon;
8.CSS sprites css雪碧
css精灵