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

html-css013

怎么用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>