1.1 属性background-color
属性background-color为元素设置背景色。它能让你为背景选择颜色填充，从而对内容进行视觉分割，提升文本和其他元素的可读性。
值:
- 颜色名称: 可以使用预定义的颜色名称，比如
red，blue，green - 十六进制值: 例如，
#ff0000，#00ff00，#0000ff - RGB: 例如，
rgb(255, 0, 0)，rgb(0, 255, 0)，rgb(0, 0, 255) - RGBA: 例如，
rgba(255, 0, 0, 0.5)(半透明红色) - HSL: 例如，
hsl(0, 100%, 50%)，hsl(120, 100%, 50%)，hsl(240, 100%, 50%) - HSLA: 例如，
hsla(0, 100%, 50%, 0.5)(半透明红色).
使用示例:
CSS
.color-red {
background-color: red;
}
.color-hex {
background-color: #3498db;
}
.color-rgba {
background-color: rgba(46, 204, 113, 0.7);
}
HTML
<body>
<div class="color-red">这个元素有红色背景。</div>
<div class="color-hex">这个元素的背景颜色是用十六进制指定的。</div>
<div class="color-rgba">这个元素有半透明绿色背景。</div>
</body>
代码说明:
background-color: red;: 为元素设置红色背景background-color: #3498db;: 使用十六进制值设置背景颜色background-color: rgba(46, 204, 113, 0.7);: 使用RGBA设置半透明绿色背景
1.2 属性background-image
属性background-image为元素设置背景图像。这样可以使用图像来创造视觉上吸引人的背景，提升网页设计和用户体验。
它需要传入图像的URL——指定要用作背景的图像路径。例如，url('image.jpg')。
使用示例:
CSS
.background-url {
background-image: url('https://via.placeholder.com/150');
width: 150px;
height: 150px;
border: 1px solid #000;
}
HTML
<body>
<div class="background-url">这个元素有一个背景图像。</div>
</body>
代码说明:
background-image: url('https://via.placeholder.com/150');: 为元素设置为背景图像。在此例中使用的是图像的URL
使用background-image的好处:
- 视觉吸引力: 使用背景图像能创造更加视觉上吸引人和有趣的网页。
- 上下文: 背景图像可以提供额外的上下文或者信息，增强页面内容的视觉体验。
- 品牌化: 背景图像可以是品牌的一部分，帮助维持统一的风格和网站的识别度。
使用背景图像的建议:
- 图像优化: 为了提升页面性能，重要的是对图像进行优化，在不显著降低质量的情况下减小其尺寸。
- 跨浏览器支持: 确保所用图像在所有目标浏览器中都能正确显示。
- 替代文本: 对于有重要意义的图像，应提供传达信息的替代方式，比如文本描述，以便于有障碍的用户使用。
1.3 background-color和background-image的共同使用
属性background-color和background-image可以共同使用，创造复杂而吸引人的背景。
比如，可以设置颜色背景，如果背景图像未加载时可见，或用彩色背景与半透明图像结合使用。
使用示例:
CSS
.combined-background {
background-color: #3498db;
background-image: url('https://via.placeholder.com/150');
width: 300px;
height: 300px;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid #000;
}
HTML
<body>
<div class="combined-background">
这个元素有一个结合了图像和颜色背景的组合背景。
</div>
</body>
代码说明:
background-color: #3498db;: 设置背景颜色background-image: url('https://via.placeholder.com/150');: 设置背景图像width: 300px;height: 300px;: 设置元素尺寸color: white;: 为更好可读性设置文本颜色display: flex;align-items: center;justify-content: center;text-align: center;: 居中元素内的文本border: 1px solid #000;: 为元素周围添加边框以便视觉突出
GO TO FULL VERSION