怎么用css把背景图片拉伸 不是平铺

html-css06

怎么用css把背景图片拉伸 不是平铺,第1张

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>