伊人久久大线蕉av成人网,日本亚洲欧美亚洲欧美一区二区三区免费观看 ,久久精品无码专区

CSS（層疊樣式表）是設(shè)計(jì)網(wǎng)站視覺外觀的強(qiáng)大工具，包括背景屬性。使用CSS，可以輕松自定義網(wǎng)頁的背景屬性，創(chuàng)造獨(dú)特的設(shè)計(jì)，提升用戶體驗(yàn)。使用一個(gè)聲明是設(shè)置各種背景屬性的高效方式，對(duì)于網(wǎng)頁開發(fā)人員來說，這有助于節(jié)省時(shí)間并保持代碼簡潔。

理解背景屬性

在一個(gè)聲明中設(shè)置多個(gè)背景屬性之前，我們需要了解 CSS 中可用的不同背景屬性并了解每個(gè)屬性的工作原理。以下是每個(gè)屬性的簡要概述。

背景顏色 ? 此屬性允許設(shè)置元素的背景顏色。

Background-image – 此屬性允許設(shè)置元素的背景圖像。使用圖像 URL、線性漸變或徑向漸變?cè)O(shè)置背景圖像。

Background-repeat ? 這個(gè)屬性允許設(shè)置背景圖像的重復(fù)方式。可以使用repeat、repeat-x、repeat-y和no-repeat等值來控制。

Background-position ? 此屬性允許設(shè)置背景圖像的位置。背景圖像可以使用top、bottom、left、right和center等值進(jìn)行定位。

Background-size ? 這個(gè)屬性允許設(shè)置背景圖片的大小。背景圖片的大小可以使用自動(dòng)、覆蓋、包含或特定大小值（以像素、ems或百分比表示）來設(shè)置。

Background-attachment – 此屬性允許設(shè)置背景圖像應(yīng)隨頁面滾動(dòng)或保持固定。

在一個(gè)聲明中設(shè)置不同的背景屬性

縮寫屬性 ‘background’ 用于設(shè)置多個(gè)背景屬性，它允許在一個(gè)聲明中設(shè)置背景顏色、圖像、重復(fù)、位置和附著。

語法

selector {
   background: [background-color] [background-image] [background-repeat] [background-position] [background-size] [background-attachment];
}

登錄后復(fù)制

這里屬性的順序并不重要，每個(gè)屬性都用空格分隔。根據(jù)設(shè)計(jì)要求，另一個(gè)屬性可以包含在“背景”速記屬性中。

如何在一個(gè)聲明中設(shè)置多個(gè)背景屬性的示例。

現(xiàn)在，我們將了解一些在一個(gè)聲明中設(shè)置多個(gè)背景屬性的示例。

示例1：設(shè)置背景圖片

在這里，我們將使用“background”速記屬性在 body 元素中設(shè)置背景圖像。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background: url("https://www.tutorialspoint.com/dip/images/black_and_white.jpg") no-repeat center center fixed;
      }
      h3 {
         text-align: center;
      }
   </style>
</head>
<body>
   <h3>Setting a background image in the body element</h3>
</body>
</html>

登錄后復(fù)制

在上面的例子中，我們?cè)O(shè)置了body元素的背景圖片和背景顏色。我們還將背景位置設(shè)置為居中，并固定背景圖像，使其在滾動(dòng)時(shí)不會(huì)移動(dòng)。 “no-repeat”屬性確保背景圖像不重復(fù)。

示例2：設(shè)置漸變背景

在這里，我們將使用background簡寫屬性在body元素中設(shè)置漸變背景。

<!DOCTYPE html>
<html>
<head>
   <title>Setting the Gradient Background</title>
   <style>
      body {
         background: linear-gradient(to top, #00cfff, #1e40ff);
      }
      h1,h3 {
         text-align: center;
      }
   </style>
</head>
<body>
   <h1>Welcome to TutorialsPoint</h1>
   <h3>Setting the Gradient Background in the body element</h3>
</body>
</html>

登錄后復(fù)制

在上面的示例中，我們使用了”linear-gradient”函數(shù)來設(shè)置漸變背景。”to top”參數(shù)指定了漸變應(yīng)該從底部到頂部。

示例 3 – 在 div 元素中設(shè)置背景圖像

在這里，我們將使用“background”簡寫屬性在 div 元素中設(shè)置背景圖像。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      div {
         background: lightblue url("https://www.tutorialspoint.com/dip/images/einstein.jpg") no-repeat center fixed;
         height:300px;
         width:250px;
         margin:auto;
      }
   </style>
</head>
<body>
   <h2>Setting the Background image for the div element</h2>
   <div></div>
</body>
</html>

登錄后復(fù)制

在上面的例子中，我們?cè)O(shè)置了body元素的背景圖片和背景顏色。我們還將背景位置設(shè)置為居中，并固定背景圖像，使其在滾動(dòng)時(shí)不會(huì)移動(dòng)。