如何在一个声明中设置不同的背景属性?

htmlweb developmentfront end technology更新于 2024/3/27 10:52:17

CSS(层叠样式表)是设计网站视觉外观(包括背景属性)的强大工具。使用 CSS，可以轻松自定义网页的背景属性，从而创建独特的设计，提升用户体验。使用一个声明是设置各种背景属性的有效方法，有助于 Web 开发人员节省时间并保持代码简洁。

了解背景属性

在同一个声明中设置多个背景属性之前，我们需要了解 CSS 中可用的不同背景属性，并理解每个属性的工作原理。以下是每个属性的简要概述。

Background-color − 此属性允许设置元素的背景颜色。
Background-image − 此属性允许设置元素的背景图像。使用图片 URL、线性渐变或径向渐变设置背景图片。
Background-repeat − 此属性用于设置背景图片的重复方式。可以使用 repeat、repeat-x、repeat-y 和 no-repeat 等值进行控制。
Background-position − 此属性用于设置背景图片的位置。可以使用 top、bottom、left、right 和 center 等值来定位背景图片。
Background-size − 此属性用于设置背景图片的大小。背景图片的大小可以使用"自动"、"覆盖"、"包含"等值来设置，也可以使用像素、em 或百分比等特定尺寸值来设置。
Background-attachment − 此属性允许设置背景图片随页面滚动或保持固定。

在一个声明中设置不同的背景属性

简写属性"background"用于设置多个背景属性，它允许在一个声明中设置背景颜色、图片、重复、位置和附件。

语法

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

此处属性的顺序无关紧要，每个属性之间用空格分隔。根据设计需求，可以在"background"简写属性中包含其他属性。

如何在一个声明中设置多个背景属性的示例。

现在，我们将了解一些在一个声明中设置多个背景属性的示例。

示例 1:设置背景图像

在这里，我们将使用"background"简写属性在 body 元素中设置背景图像。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background: url("https://www.cainiaomax.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>

在上面的例子中，我们设置了 body 元素的背景图像和背景颜色。我们还将背景位置设置为居中，并固定了背景图像的位置，使其在滚动时不会移动。"no-repeat"属性确保背景图像不会重复。

示例 2:设置渐变背景

在这里，我们将使用 background 简写属性在 body 元素中设置渐变背景。

<!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>

在上面的例子中，我们使用了"linear-gradient"函数来设置渐变背景。"to top"参数指定渐变应从下到上。

示例 3 - 在 div 元素中设置背景图片

在这里，我们将使用"background"简写属性来在 div 元素中设置背景图片。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      div {
         background: lightblue url("https://www.cainiaomax.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>

在上面的示例中，我们设置了 body 元素的背景图像和背景颜色。我们还将背景位置设置为居中，并固定了背景图像，使其在滚动时不会移动。