当前位置：首页 > Web开发 > 正文

CSS中如何使用背景样式属性，看这篇文章就够用了

2024-03-31 Web开发

标签：

原文:CSS中如何使用背景样式属性，看这篇文章就够用了

css背景样式属性介绍

背景样式就是自定义HTML标签的背景颜色或背景图像。

背景属性说明表

属性名属性值描述
background-color #f00、red、rgb(255,0,0) 设置背景颜色。
background-image url(背景图片路径) 设置背景图像。
background-repeat repeat、repeat-x、repeat-y、no-repeat 设置背景图片是否平铺和平铺方向。
background-position left、center、right、top、bottom、固定值、百分比设置背景图片位置。
background-attachment scroll、fixed 设置背景图片位置是否是固定或滚动。
background 属性值就是以上的所有值设置背景的缩写形式。
属性为background-color使用方式

让我们进入属性为background-color实践，实践内容如：将HTML页面中的div背景设置为红色。

代码块

Copy

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>background-color属性使用</title> <style> div{ background-color: red; } </style> </head> <body> <div></div> </body> </html>

结果图

技术图片

为什么我们给div标签设置了background-color属性，还有属性值为red，div标签背景没有发生任何变化呢？

原因有2点如： div标签里面没有任何内容、 div标签没有设置宽高度。

接下来我们在实践，将div标签放置一些内容。

代码块

Copy

结果图

现在属性为background-color和属性值为red才真正的被渲染出来。

现在让我们将div内容消除掉，然后我们给div设置宽高度为200px像素，看看属性为background-color和属性值为red，能否被渲染出来呢？

代码块

Copy

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>background-color属性使用</title> <style> div{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div></div> </body> </html>

结果图

技术图片