css怎樣讓背景充滿整個螢幕

2021-07-10 11:16:36 字數 602 閱讀 1329

...your content goes here...

給body標籤指定背景圖,這樣背景圖就可以填充整個瀏覽器viewport了。

其實,該方案對所有的塊級容器都可以生效。塊級容器的寬高是動態的,那麼背景圖將自動伸縮,充滿整個容器。

css body標籤的樣式如下:

body

上面最重要的一條就是:

background-size: cover;

這樣瀏覽器就會按比例縮放背景圖直至背景圖寬高不小於容器的寬高(在上面的例子中,就是body標籤)。

因此,在選擇背景圖時,要特別注意尺寸。為了照顧到大尺寸螢幕,demo裡用的尺寸為5498px * 3615px 。

同時,為了讓背景圖始終相對於viewport居中,宣告了:

background-position: center center;

上面的規則會把背景圖縮放的原點定位到viewport的中心。

接下來需要解決的問題是:當內容的高度大於viewport的高度時,會出現滾動條。希望背景圖始終相對於viewport固定,即使使用者滾動時也是一樣。

解決辦法就是:

background-attachment: fixed;

css設定讓a標籤充滿整個li

首先貼一段html li id sendtext a href title 傳送文字 a li li id mic a href title 關閉麥克風 a li li id camera a href title 關閉攝像頭 a li li id audio a href title 關閉音量 a...

讓div撐滿整個螢幕的方法(css)

在body只有乙個div的時候,可以通過這樣的方式讓div撐滿整個螢幕。1.給div設定定位。複習一下 css中position有五種屬性 static 預設值,沒有定位 absolute 絕對定位,相對於父級元素進行定位 relative 相對定位 fixed 固定定位,相對於瀏覽器視窗進行定位 ...

如何讓div的大小佔滿整個螢幕?

一 先來 二 原因在這裡 1 如果要以百分比設定元素 div 的尺寸,必要以父元素的尺寸作為參考,如果父元素沒有設定尺寸,那麼子元素 div 尺寸自然不會生效。2 所以如果設定div的高度為100 那麼他的參考元素就是是body,那麼如何設定body的尺寸呢?3 在怪異模式下,body可以作為根元素...