<div class="container">
 <p><em>單擊下面的按鈕將元素輸入全屏模式</em></p>
 <div class="element" id="element"><p>我在全屏模式下改變顏色！</p></div>
 <br />
 <button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
 全屏!
 </button>
</div>

.container {
 margin: 40px auto;
 max-width: 700px;
}
.element {
 padding: 20px;
 height: 300px;
 width: 100%;
 background-color: skyblue;
}
.element p {
 text-align: center;
 color: white;
 font-size: 3em;
}
.element:-ms-fullscreen p {
 visibility: visible;
}
.element:fullscreen {
 background-color: #e4708a;
 width: 100vw;
 height: 100vh;
}

家好，我是大澈！

本文約 700+ 字，整篇閱讀約需 1 分鐘。

每日分享一段優(yōu)質(zhì)代碼片段。

今天分享一段 CSS 代碼片段，使用 CSS 設(shè)置網(wǎng)頁全屏背景圖片，很簡單。

老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區(qū)留下你的見解！

html {
background: url('images/bg.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover; /* 適用于舊版 WebKit 瀏覽器 */
-moz-background-size: cover; /* 適用于舊版 Firefox 瀏覽器 */
-o-background-size: cover; /* 適用于舊版 Opera 瀏覽器 */
}

分享原因

這段代碼展示了如何使用 CSS 設(shè)置網(wǎng)頁全屏背景圖片，使其在不同瀏覽器中都能完美適應(yīng)屏幕尺寸。

這對于創(chuàng)建具有視覺吸引力且兼容性良好的網(wǎng)頁非常重要。

代碼解析

1. background: url('images/bg.jpg') no-repeat center center fixed;

background：簡寫屬性，用于設(shè)置所有背景屬性。

url('images/bg.jpg')：指定背景圖像的路徑。

no-repeat：背景圖像不重復(fù)顯示。

center center：背景圖像在水平方向和垂直方向都居中顯示。

fixed：背景圖像固定在視口中，即使頁面滾動，背景圖像也不會移動。

2. background-size: cover;

background-size: cover：使背景圖像按比例縮放，以完全覆蓋背景區(qū)域。這意味著圖像可能會被裁剪以適應(yīng)容器。

3. 瀏覽器前綴的使用

-webkit-background-size：適用于舊版 WebKit 瀏覽器（如舊版 Safari 和 Chrome）。

-moz-background-size：適用于舊版 Firefox 瀏覽器。

-o-background-size：適用于舊版 Opera 瀏覽器。

這些瀏覽器前綴用于處理舊版瀏覽器的兼容性問題。雖然現(xiàn)代瀏覽器大多已經(jīng)支持標(biāo)準(zhǔn)的 background-size 屬性，但在代碼中加入這些前綴可以確保在老舊瀏覽器中也能正常顯示背景圖片。

- end -

前遇到一個(gè)需要在瀏覽器全屏展示頁面的效果,我們經(jīng)常使用的就是requestFullscreen和exitFullscreen，來進(jìn)行全屏或者退出全屏，但有時(shí)候我們可能需要獲取打開全屏?xí)r的窗口權(quán)限信息，這種情況下就需要使用getScreenDetails了

代碼如下

<div class="wrap">
    <div class="content">
      Setting Screen
    </div>
    <div class="btn">
      <button id="full-screen" onclick="fullScreen()">全屏</button>
      <button id="exit-full-screen" onclick="exitFullScreen()">退出全屏</button>
    </div>
  </div>
  <script>
     //獲取全屏元素，可以是具體元素或者body
    const wrap = document.querySelector('.wrap')
    let primaryScreen = null
    async function fullScreen () {
      // 檢測網(wǎng)頁是否有全屏元素
      if(!document.fullscreenElement){
        console.log('/screen.html [43]--1','full-screen',document.fullscreenElement);
        try {
          if(!primaryScreen) {
            //獲取可以全屏的窗口信息
            primaryScreen = (await getScreenDetails()).screens.find(
              (screen) => screen.isPrimary,
            );
          }
          console.log('/screen.html [54]--1','primaryScreen',primaryScreen);
          //將窗口信息傳給requestFullscreen,窗口將彈出確認(rèn)彈框
          await wrap.requestFullscreen({ screen: primaryScreen });
        } catch (err) {
          console.error(err.name, err.message);
        }
      }
      

    }

    function exitFullScreen () {
      // 檢測網(wǎng)頁是否有全屏元素
      if(document.fullscreenElement) {
        // document 退出全屏
        document.exitFullscreen()
        console.log('/screen.html [43]--1','exit-full-screen',document.fullscreenElement);
      }
    }
    

如圖所示，點(diǎn)擊允許將獲取同意全屏窗口的信息

PS:

• 全屏元素，可以是具體元素或者body
• 退出全屏只能是document
• 在進(jìn)行全屏或退出全屏?xí)r，最好進(jìn)行document.fullscreenElement全屏元素獲取
• getScreenDetails可以獲取系統(tǒng)同意全屏的窗口信息