web标准解决方案_4

区别纯修饰图片和图片标签

body{

 background-image:url(/img/patten.gif) /*默认情况下，浏览器会水平、垂直地重复显示背景图片*/

}

background-repeat:repeat-x;

背景图片总出现在背景颜色上面，可以利用这个特点实现些功能:

 图片高度一定，当内容高度超过图片高度，颜色渐变就会停止，这时只需给背景加一个图片底部色即可，那么颜色间的转变就看不出来了

body{

backgrond-image:url();

background-repeat:repeat-x;

background-color:#ccc;

}

如果图片是纯表现性的，就从文档中剥离出来吧。

例如希望在网页开头显示一个大得品牌图片，只需在Html中给这个图片创建一个钩子

#branding{

width:700px;

height:200px;

background-image:...;

background-repeat:no-repeat;

}

background-position: left center; /*同百分比定位一样：样式结果 = 元素和背景图片两者的坐标(left,center)重叠*/

background-position: 20px 20px; /* 样式结果 = 背景图片的(0,0)与元素(20, 20)重叠*/

规范指出：不要将px 或 % 等单位 与 关键字center 合用

设置background属性的简写：

background: #ccc url() no-repeat left center

固定宽度支持高度可变的圆角

灵活的圆角框

 用四张背景图片实现水平、垂直可扩展的圆角框

 添加了几个额外的标签

<style type="text/css">

.outer {
width: 20em;
background: url(img/bottom-left.gif) no-repeat left bottom;
}

.inner2{
background: url(img/bottom-right.gif) no-repeat right bottom;

}

.inner{
background: url(img/top-left.gif) no-repeat left top;
padding-bottom:1em;
}

h2{
background: url(img/top-right.gif) no-repeat right top;
padding-top:1em;
}

h2, p{
padding-left:1em;
padding-right:1em;
}

</style>

<div class="outer">
<div class="inner2">
<div class="inner">
<h2>title</h2>
<p>
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊1
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊2
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊3
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊4
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊5
</p>
</div>
</div>
</div>

实现以上效果也可以用山角顶

css3多背景特性

background-image:url(img/mtop-left.gif),
url(img/mtop-right.gif),
url(img/mbottom-left.gif),
url(img/mbottom-right.gif);
background-repeat: no-repeat;
background-position: top left, top right, bottom left, bottom right;

border-radius

可以画一个圆

<div style="width:10em;height:10em;border-radius:50%;background-color:red;"></div>

border-image: border支持图片，用法较难，暂放

图像投影：

此方法利用两个背景，那还不如用一个背景，也就是投影背景图，效果不好。

<div class="img-wrapper">
<div>
<img src="img/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" />
</div>
</div>