CSS 背景：Background

最新推荐文章于 2024-05-08 16:04:38 发布

梁辰兴

最新推荐文章于 2024-05-08 16:04:38 发布

阅读量274

点赞数 1

分类专栏： CSS 文章标签： css 前端 background 背景颜色背景图片

本文链接：https://blog.csdn.net/m0_62617719/article/details/132982461

版权

CSS 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

文章目录

CSS 背景
背景颜色
背景图像
背景图像 - 水平或垂直平铺
背景图像- 设置定位与不平铺
背景- 简写属性
CSS 背景属性

CSS 背景

CSS（Cascading Style Sheets）背景是网页设计中用于设置网页元素背景效果的一种技术。它允许你更改元素的背景颜色、图像、大小、位置等属性，以创建更具吸引力和专业的网页设计。

CSS背景的主要属性包括：

background-color：用于设置元素的背景颜色。
background-image：用于在元素背景中设置图像。
background-repeat：用于设置背景图像是否以及如何重复。
background-size：用于设置背景图像的大小。
background-position：用于设置背景图像的位置。
background-attachment：用于设置背景图像是否固定或随页面滚动。

此外，CSS还提供了简写属性background，它允许你在一行内设置所有背景属性。

了解和使用CSS背景对于创建现代网页和网站至关重要，因为它允许你以更精细的方式控制网页的外观和感觉，从而使你的网页在视觉上更加吸引人。

背景颜色

在CSS中，可以使用background-color属性来设置元素的背景颜色。这个属性为元素设置一种纯色，这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。

以下是一些常见的背景颜色示例：

灰色（gray）

body {
  background-color: gray;
}

绿色（turquoise）

body {
  background-color: turquoise;
}

紫色（lavender）

body {
  background-color: lavender;
}

珊瑚色（coral）

body {
  background-color: coral;
}

这些示例都使用了CSS中的背景颜色属性来设置HTML文档的body元素的背景颜色。每种颜色都可以根据具体的设计和需求应用于不同的元素和场景。

背景图像

在CSS中，可以使用background-image属性来为元素设置背景图像。这个属性指定了用作元素背景的图像。

以下是一些常见的背景图像示例：

在HTML文件中使用CSS样式设置背景图像：

<body style="background-image:url('bg.jpg');">
</body>

在CSS样式表中设置背景图像：

body {
  background-image: url('bg.jpg');
}

这些示例都使用了CSS中的background-image属性来设置HTML文档的body元素的背景图像。图像url(‘bg.jpg’)可以根据具体的设计和需求替换为实际的图像文件路径或URL。

此外，background-repeat、background-position、background-size、background-attachment等属性可以进一步控制背景图像的显示方式，比如重复、位置、大小和固定方式等。例如，可以设置背景图像不重复、固定在页面的右下角，或者调整背景图像的大小以适应元素的尺寸等。

背景图像 - 水平或垂直平铺

在CSS中，可以使用background-repeat属性来控制背景图像是否以及如何重复显示。

默认情况下，background-image属性会在页面的水平方向平铺，以覆盖整个元素实体。如果需要在HTML页面上对背景图像进行垂直平铺，可以将background-repeat属性的值设置为“repeat-y”。

以下是一个背景图像垂直平铺的示例：

body {
  background-image: url('bg.jpg');
  background-repeat: repeat-y;
}

这个示例将背景图像设置为垂直平铺，即图像将在垂直方向上重复显示，以覆盖整个元素实体。

如果需要同时进行水平和垂直平铺，可以将background-repeat属性的值设置为“repeat”。

以下是一个背景图像水平和垂直平铺的示例：

body {
  background-image: url('bg.jpg');
  background-repeat: repeat;
}

这个示例将背景图像设置为水平和垂直平铺，即图像将在水平和垂直方向上重复显示，以覆盖整个元素实体。

背景图像- 设置定位与不平铺

在CSS中，可以使用background-position属性来控制背景图像的位置。这个属性允许你指定背景图像相对于元素的左上角或右下角的起始位置。

以下是一些关于背景图像定位的示例：

将背景图像定位到元素的左上角：

body {
  background-image: url('bg.jpg');
  background-position: left top;
}

将背景图像定位到元素的居中位置：

body {
  background-image: url('bg.jpg');
  background-position: center center;
}

将背景图像定位到元素的右下角：

body {
  background-image: url('bg.jpg');
  background-position: right bottom;
}

这些示例都使用了CSS中的background-position属性来设置背景图像的位置。可以使用关键字、百分比或像素值来设置背景图像的位置。此外，background-position属性还可以设置同时沿两个方向定位图像（例如左下到右上），方法是使用两个值，第一个值表示水平方向，第二个值表示垂直方向。例如：

body {
  background-image: url('bg.jpg');
  background-position: left 20% bottom 30%;
}

这个示例将背景图像定位到元素的左上角偏移20%的水平位置和下偏移30%的位置。这样的定位可以帮助你更好地控制背景图像的位置，以使其与元素中的文本或其他内容更协调地显示。

背景- 简写属性

在CSS中，可以使用background属性来简写所有的背景属性。这个属性可以在一行内设置所有的背景属性，包括背景颜色、背景图像、背景重复、背景位置和背景附着。

以下是一些关于使用background属性的示例：

设置背景颜色和背景图像：

body {
  background: #ffffff url('bg.jpg') no-repeat right top;
}

这个示例将body元素的背景颜色设置为白色，将背景图像设置为url(‘bg.jpg’)，并禁止背景图像重复，同时将图像定位到元素的右上角。

设置多个背景图像并调整大小：

body {
  background: url('image1.jpg') no-repeat center center, url('image2.jpg') repeat-y right top, url('image3.jpg') cover;
}

这个示例将在body元素上设置三个背景图像。第一个图像不重复并居中显示，第二个图像在垂直方向上重复并显示在右上角，第三个图像会扩展以完全覆盖整个元素区域。

background属性允许你以更简洁的方式设置多个背景属性，从而简化了CSS代码的编写和阅读。

CSS 背景属性

以下的图表展示了CSS 背景属性：

属性	描述
background-color	设置元素的背景颜色
background-image	设置元素的背景图像
background-repeat	设置背景图像是否及如何重复
background-size	设置背景图像的大小
background-position	设置背景图像的位置
background-attachment	设置背景图像是否固定或随页面滚动

梁辰兴

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 背景：Background

此外，background-repeat、background-position、background-size、background-attachment等属性可以进一步控制背景图像的显示方式，比如重复、位置、大小和固定方式等。例如，可以设置背景图像不重复、固定在页面的右下角，或者调整背景图像的大小以适应元素的尺寸等。这个示例将body元素的背景颜色设置为白色，将背景图像设置为url(‘bg.jpg’)，并禁止背景图像重复，同时将图像定位到元素的右上角。这个属性指定了用作元素背景的图像。
复制链接

扫一扫