制作咖啡店的banner
一、相关知识点
1、设置背景颜色
网页元素的背景颜色使用background-color属性来设置
2、设置背景图像
background-color属性实现将图像作为网页元素的背景
例如：
body
{
background-image:url(images/jianbian.jpg);
}
3、设置背景图像平铺
默认情况下，背景图像会自动向水平和竖直两个方向平铺。可以通过background-repeat属性来改变
4、设置背景图像位置
background-position属性 //图像位置属性
5、设置背景图像固定
background-attachment属性//图像固定属性
6、综合设置元素的背景
在CSS中背景属性也是一个复合属性，可以将背景相关的样式都综合定义在复合属性background中
box-shadow属性
6.1 CSS3中的box-shadow属性可以轻松实现阴影的添加
例如：
box-shawdow: 10px 10px 5px 2px #333;
6.2可以改变阴影的投射方向以及添加多重阴影效果
box-shadow: 5px 5px
10px 2px #999 inset,-5px
-5px 10px 2px #080 inset;
二、制作咖啡店的banner
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="07banner.css">
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
CSS代码：
*{
margin: 0;
padding: 0;
}
.outer{
height: 344px;
width: 900px;
background: url(07bg.png) repeat-x;
margin: 100px auto;
box-shadow: 8px 8px 5px #333;
}
.inner{
height: 344px;
width: 900px;
background: url(07coffee.png) no-repeat center 30px;
}
效果图：
