一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动。
以下是用CSS实现的方法:
HTML:
1
2
3
4
5
6
7
|
<!DOCTYPE html>< html >< head > < meta http-equiv = "content-type" content = "text/html;charset=utf-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" > < title >title</ title ></ head >< body >< div class = "wrapper" > <!--背景图片--> < div id = "web_bg" style = "background-image: url(./img/bg.jpg);" ></ div > <!--其他代码 ... --> </ div ></ body ></ html > |
CSS:
1
2
|
#web_bg{ position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; min-width : 1200px ; z-index : -10 ; zoom: 1 ; background-color : #fff ; background-repeat : no-repeat ; background- size : cover; -webkit-background- size : cover; -o-background- size : cover; background-position : center 0 ; }
|