1、首先准备一张设置为背景的图片,这边准备的是一张650px*347px的图片。
2、然后建立一个html文档,将它和背景图片放到一个文件夹中。
3、编辑html文档,这边建立一个div,设置宽度为700px,高度跟背景图一样,为347px。
4、就给div设置背景图片。
5、在浏览器中预览会发现图片平铺了,这不是想要的效果。
6、然后可以给div再加上属性,-moz-background-size:100% 100%background-size:100% 100%。
7、这样设置后就会发现背景图片拉伸至100%了。
背景色渐变两种方法:1,做一个竖的细条gif,颜色从上到下渐变.以此作背景图.背景图片的颜色无法无限延伸,因为gif长度有限;2,css滤镜做背景色渐变如下,背景颜色渐变可以无限延伸:程序代码<style type="text/css"<div><div>Left</div>
<div>Right</div>
</div>
纯css的:如果left宽度固定的话(比如:200px),就给外面那个大div弄个宽200px的背景图,只在y方向一直重复
要是left宽度不固定或者你愿意用javascript,就用js取得两个div,判断高度,让矮的那个高度等于高的那个:
<div id="left">Left</div>
<div id="right">Right</div>
<script>
function sameH(el1,el2) {
var a = document.getElementById(el1)
var b = document.getElementById(el2)
if (a &&b) {
if (a.scrollHeight <b.scrollHeight) {
a.style.height = b.scrollHeight + "px"
}
else {
b.style.height = a.scrollHeight + "px"
}
}
else {
alert("sameH函数需要的对象id不存在或创建在函数运行之后") }
}
sameH("left","right")//传入你的两个div的id
</script>