相信很多前端會遇到這個問題:要做一個尺寸自適應的頁面,其中某個容器的背景圖也需要跟着容器的尺寸一起改變。如果背景是有規律的純色或者漸變還好辦,直接平鋪即可。但如果背景是要求完全顯示的一張完整的圖片呢,我們使用background-image這個屬性是沒辦法達到我們的要求的,因為背景圖的大小 ...
主要使用:background size:cover lt body style width: px height: px gt lt form id form runat server gt lt div style background image:url top .png width: height: background size:cover gt lt div gt lt form gt ...
2014-11-18 10:16 0 16694 推薦指數:
相信很多前端會遇到這個問題:要做一個尺寸自適應的頁面,其中某個容器的背景圖也需要跟着容器的尺寸一起改變。如果背景是有規律的純色或者漸變還好辦,直接平鋪即可。但如果背景是要求完全顯示的一張完整的圖片呢,我們使用background-image這個屬性是沒辦法達到我們的要求的,因為背景圖的大小 ...
默認情況下,通過HTML代碼的BODY標簽設置好背景圖片<body background="x.jpg"> 后,圖片會自動橫向和縱向平鋪。這就會產生一些美觀上的問題。 XP人提供CSS代碼如下,放在頁面頭部即可,僅供參考: <style type="text/css"> ...
...
...
...
效果圖: 使用圖片: ...
效果參考 http://vip.163.com/ http://vip.sina.com.cn/ 特點:背景圖片在不變形的情況下盡可能的顯示完整,窗口不出現滾動條,始終全屏顯示 JS: #content代表最外層的DIV,使頁面全屏 .bg代表背景圖片 src ...
一、現背景圖片的自適應分辨率: 二、3種方法使背景圖隨電腦分辨率改變,兼容新老辦法 1、嘗試以下css代碼,對每個分辨率設置不同的背景圖片: 2、利用css3新屬性:background-size具體使用方法可以百度:css3 background-size ...