使用CSS設定背景影像的大小？-css教學-PHP中文網

首頁

web前端

css教學

使用CSS設定背景影像的大小？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 08, 2023 am 09:05 AM

使用CSS設定背景影像的大小？

使用CSS，我們可以使用‘background-image’屬性為HTML元素設定背景圖片。此外，在新增背景圖像後，還需要設定其尺寸。

我們可以使用CSS的「background-size」屬性來設定背景圖片的大小。

文法

使用者可以按照下面的語法使用CSS來設定背景圖像的大小。

background-size: width length | width | contain | inherit | cover | initial

我們可以使用上述值來設定背景圖片的大小。在這裡，我們已經解釋了所有的值。

寬度長度 - 設定背景圖像的寬度和高度。使用者可以使用像素、百分比或 rem 作為寬度和長度值。
寬度 - 它只設定圖像的寬度並設定「自動」高度。
Contain − 用於設定HTML元素的背景圖片，而不會減少背景圖片的尺寸。
繼承 − 它從父元素的背景圖片中繼承背景圖片大小。
封面 − 它以一種方式設定背景圖片的尺寸，使其能夠適應HTML元素。

範例 1

在下面的範例中，我們為HTML div元素設定了背景圖像。 div元素的尺寸為500 X 300。使用background-size屬性，我們將背景圖像設定為200 X 200的尺寸。

在輸出中，使用者可以觀察到背景圖像的大小小於div元素。此外，我們使用了「background-repeat: no-repeat」CSS屬性來避免重複。

<html>
<head>
   <style>
      .div {
         background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
         background-size: 200px 200px;
         width: 500px;
         height: 300px;
         border: 1px solid blue;
         background-repeat: no-repeat;
      }
   </style>
</head>
<body>
   <h3 id="Using-the-background-size-CSS-property-to-set-the-size-of-the-background-image">Using the background-size CSS property to set the size of the background image</h3>
   <div class = "div">
      This is a content of the div.
   </div>
</body>
</html>

Example 2

的翻譯為：

範例2

在下面的範例中，我們使用「background-size: cover」CSS 屬性來設定背景圖片的尺寸。

在輸出中，我們可以觀察到背景圖像適合 div 元素。然而，當我們將background-size設定為cover時，一些影像邊緣被切掉了。

<html>
<head>
   <style>
      .div {
         background-image: url("https://i.pinimg.com/736x/91/aa/88/91aa882cdcb4632063535e86c829d3ba.jpg");
         background-size: cover;
         width: 500px;
         height: 500px;
         border: 2px solid green;
      }
   </style>
</head>
<body>
   <h3 id="Using-the-i-background-size-i-CSS-property-to-set-the-size-of-the-background-image">Using the <i> background-size </i> CSS property to set the size of the background image</h3>
   <div class = "div">
      This is a content of the div.
   </div>
</body>
</html>

Example 3

的中文翻譯為：

範例 3

在下面的範例中，我們使用「background-size: contian」CSS 屬性來設定背景圖片大小。

在輸出中，我們可以看到它設定了背景影像，而不會抑制影像的尺寸。

<html>
<head>
   <style>
      .div {
         background-image: url("https://cdn.pixabay.com/photo/2016/06/02/02/33/triangles-1430105__480.png");
         background-size: contain;
         width: 500px;
         height: 500px;
         border: 2px solid green;
         font-size: 3rem;
      }
   </style>
</head>
<body>
   <h3 id="Using-the-i-background-size-contain-i-CSS-property-to-set-the-size-of-the-background-image">Using the <i> background-size: contain </i> CSS property to set the size of the background image</h3>
   <div class = "div">
      Hello! How are you?
   </div>
</body>
</html>

Example 4

的翻譯為：

範例4

在下面的範例中，我們只給了'background-size'屬性的寬度值。每當我們只使用一個值作為'background-size'屬性時，它會將高度設為自動，使用者可以在輸出中看到這一點。

<html>
<head>
   <style>
      .div {
         background-image: url("https://images.pexels.com/photos/235985/pexels-photo-235985.jpeg?cs=srgb&dl=pexels-pixabay-235985.jpg&fm=jpg");
         background-size: 20rem;
         width: 500px;
         height: 500px;
         border: 2px solid green;
         font-size: 3rem;
      }
   </style>
</head>
<body>
   <h3 id="Using-the-i-background-size-length-auto-i-CSS-property-to-set-the-size-of-the-background-image">Using the <i> background-size: length auto </i> CSS property to set the size of the background image</h3>
   <div class = "div">
      Hello! How are you?
   </div>
</body>
</html>

使用者學會了使用 CSS 設定背景圖片的大小。我們可以設定自訂尺寸來設定背景圖片。此外，我們可以將背景尺寸的寬度和高度設定為“auto”值。如果使用者希望使用背景覆寫整個 HTML 元素，則應使用「cover」作為背景大小屬性的值。

以上是使用CSS設定背景影像的大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除