如何讓背景圖片充滿整個屏幕?


方式一:

margin:0px;
background: url(images/beijing.png) no-repeat;
background-size:100% 100%;
background-attachment:fixed;

url(images/beijing.png)——圖片路徑的位置;

no-repeat—— 圖片不重復;

center 0px——center是距離頁面左邊的定位,0px是距離頁面上面的定位;

background-position: center 0——就是圖片的定位,同上;

background-size: cover;——把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中;

min-height: 100vh;——視窗的高度,“視區”所指為瀏覽器內部的可視區域大小,即window.innerWidth/ window.innerHeight大小。

方式2:

background: url("image.png") no-repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;或者background-size:100%;

方式三:

給body標簽指定背景圖,這樣背景圖就可以填充整個瀏覽器viewport了。其實,該方案對所有的塊級容器都可以生效。塊級容器的寬高是動態的,那么背景圖將自動伸縮,充滿整個容器。CSS body標簽的樣式如下:

body {
/* 加載背景圖 */
background-image: url(images/background-photo.jpg);
/* 背景圖垂直、水平均居中 */
background-position: center center;
/* 背景圖不平鋪 */
background-repeat: no-repeat;
/* 當內容高度大於圖片高度時,背景圖像的位置相對於viewport固定 */
background-attachment: fixed;
/* 讓背景圖基於容器大小伸縮 */
background-size: cover;
/* 設置背景顏色,背景圖加載過程中會顯示背景色 */
background-color: #464646;
}

其實當時在互聯網界已經有過一些統一樣式表語言的建議了,但CSS是第一個含有“層疊”豐意的樣式表語言。在CSS中,一個文件的樣式可以從其他的樣式表中繼承。讀者在有些地方可以使用他自己更喜歡的樣式,在其他地方則繼承或“層疊”作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設計,混合每個人的愛好。

哈坤於1994年在芝加哥的一次會議上第一次提出了CSS的建議,1995年的www網絡會議上CSS又一次被提出,博斯演示了Argo瀏覽器支持CSS的例子,哈肯也展示了支持CSS的Arena瀏覽器。

同年,W3C組織(World WideWeb Consortium)成立,CSS的創作成員全部成為了W3C的工作小組並且全力以赴負責研發CSS標准,層疊樣式表的開發終於走上正軌。有越來越多的成員參與其中,例如微軟公司的托馬斯·萊爾頓(Thomas Reaxdon),他的努力最終令Internet Explorer瀏覽器支持CSS標准。哈坤、波斯和其他一些人是這個項目的主要技術負責人。1996年底,CSS初稿已經完成,同年12月,層疊樣式表的第一份正式標准(Cascading style Sheets Level 1)完成,成為w3c的推薦標准。

1997年初,W3C組織負責CSS的工作組開始討論第一版中沒有涉及到的問題。其討論結果組成了1998年5月出版的CSS規范第二版。

或許還有更多,希望各位大佬們分享分享!😇


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM