教你一招搞定css背景圖的大小-前端問答-PHP中文網

教你一招搞定css背景圖的大小

醉折花枝作酒筹

發布： 2021-08-13 15:33:28

原創

3218 人瀏覽過

上一篇文章中我們了解了設定背景圖重複的方法，請看《如何使用css設定背景圖的重複與否》。這次我們來了解設定背景圖大小的方法，有需要的可以參考參考。

當我們想要讓我們手中的背景圖將整個畫面都佔住的時候，我們該怎麼去做呢？

來看看小栗子吧。

<style>
    div{
      background-image: url("images/3.jpg");
      background-repeat:no-repeat;
      background-size: 400px;
    }
  </style>
</head>
<body><div>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
</div>
</body>

登入後複製

這個小例子的結果是

教你一招搞定css背景圖的大小

可以看到，當我們在改變某一個屬性的值時，這個背景也隨著值的改變而變大了。那我們在看看這個屬性是什麼呢？可以看到我們修改的是background-size這個屬性的值。

那我們就來看看這個屬性的意思吧。

background-size 屬性規定背景圖像的尺寸。圖片可以保有其原有的尺寸，或拉伸到新的尺寸，或在保持其原有比例的同時縮放到元素的可用空間的尺寸。

來看看這個屬性的語法吧。

background-size: length|percentage|cover|contain;

登入後複製

這個值的解釋，我就直接做成表格了，可以去看看。

教你一招搞定css背景圖的大小

推薦學習：css影片教學

以上是教你一招搞定css背景圖的大小的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

教你一招搞定css背景圖的大小