用DIV+css制作 自适应宽度的banner 且banner背景图片两侧色彩不一致?能在各个主流浏览器中兼容。

html-css011

用DIV+css制作 自适应宽度的banner 且banner背景图片两侧色彩不一致?能在各个主流浏览器中兼容。,第1张

.banner {

width: 80%

max-width: 1260px

min-width: 780px

background:url(images/bgline.gif repeat-y)

margin: 0 auto

}

bgline.gif做长点比如超过2048px,也就是说背景渐变是靠图片repeat来实现的。

第一步:你的这个banner,要设计成左右两端可以与页面背景相融合的那种形式。比如左右两端都用了渐变透明,看上去与整个网页的背景融合在了一起。

第二步:这个1000px的banner,在屏幕上居中显示。然后不管你的显示器分辨率多宽,它都会居中。

通过这种方式。这个1000px的banner,让人看上去不分显示器分辨率多大,都是通屏显示了。。。

没有其他的办法。除非你不在意图片变形,在网页中用一段js来取当前浏览器的实际宽度,然后用js来改变这个banner的width值。但这样图片会变形的(即便你用等比例缩放,但是放大后图片失真了)

用一个div包裹banner和导航条,设置div设置宽度,和margin,比如

.wrap{ width:1000pxmargin: 0 auto}

就会水平居中了。