0628
背景
背景颜色
backgroud-color
背景图片
backgroud-image
背景图平铺
repeat 平铺 (默认值)no-repeat 不平铺 repeat-x 横向平铺 repeat-y 纵向平铺
背景图位置
background-position
第一个值 X轴 num center left right
第二个值 Y轴 num center top bottom
背景图是否滚动
background-attachment
fixed 固定
位置是以浏览器的可视区域来定位
不会随着页面的滚动而改变自身的位置
scroll 滚动
位置是以容器来定位
会随着页面的滚动而改变自身的位置
例如:
#box{
width:500px;
height:300px;
background-color: #0b9380;
background-image: url(img/pm0025.jpg);
background-repeat: no-repeat;
background-position:right bottom;
background-attachment: scroll;
}
复合样式:
#email{
width:298px;
height: 57px;
background:#0b9380 url(img/email.png) no-repeat 16px 25px fixed;
}
border区域会不会显示背景图?
如果背景图平铺 会显示
如果不平铺 不会显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:300px;
height:200px;
border:10px dotted #0c0c0c;
background: url("img/14.jpg") repeat-x;
margin:40px 30px 20px 10px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>