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

首頁

web前端

前端問答

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

醉折花枝作酒筹

Aug 13, 2021 pm 03:33 PM

css

上一篇文章中我們了解了設定背景圖重複的方法，請看《如何使用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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7356

Java教學

1628

CakePHP 教程

1353

Laravel 教程

1265

PHP教程

1214

Related knowledge

vue中placeholder是什麼意思 May 07, 2024 am 09:57 AM

在 Vue.js 中，placeholder 屬性指定輸入元素的佔位符文本，當使用者未輸入內容時顯示，提供輸入提示或範例，提高表單可存取性。其用法為在輸入元素中設定 placeholder 屬性，並可使用 CSS 自訂外觀。最佳實踐包括與輸入相關、簡短清晰、避免預設文本，並考慮可訪問性。

js中span是什麼意思 May 06, 2024 am 11:42 AM

span 標籤可為文字新增樣式、屬性或行為，用於：新增樣式，如顏色、字體大小。設定屬性，如 id、class 等。關聯行為，如點擊、懸停等。標記文本，以便進一步處理或引用。

js中rem是什麼意思 May 06, 2024 am 11:30 AM

CSS 中的 REM 是一種相對於根元素（html）字體大小的相對單位。它具有以下特點：相對根元素字體大小，不受父元素影響。當根元素字體大小改變時，使用 REM 的元素也會隨之調整。可用於任何 CSS 屬性。使用 REM 的優點包括：回應性：保持不同裝置和螢幕大小上的文字可讀性。一致性：確保整個網站字體大小一致。可擴充性：透過調整根元素字體大小輕鬆變更全域字體大小。

vue中引入圖片的方法 May 02, 2024 pm 10:48 PM

Vue 中引入圖片有五種方法：透過 URL、require 函數、靜態檔案、v-bind 指令和 CSS 背景圖片。可以在 Vue 的計算屬性或偵聽器中處理動態圖片，並使用打包工具優化圖片載入。確保路徑正確，否則會顯示載入錯誤。

js中什麼是節點 May 07, 2024 pm 09:06 PM

節點是 JavaScript DOM 中表示 HTML 元素的實體。它們代表頁面中的特定元素，可用於存取和操作該元素。常見的節點類型包括元素節點、文字節點、註解節點和文件節點。透過 DOM 方法（如 getElementById()），可以存取節點並對其進行操作，包括修改屬性、新增/移除子節點、插入/替換節點和克隆節點。節點遍歷有助於在 DOM 結構中導航。節點在動態建立頁面內容、事件處理、動畫和資料綁定方面非常有用。