CSS——背景与边框

任书含廊坊师范提高班十五期

于 2020-08-05 15:46:50 发布

阅读量361

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/s310040799/article/details/107576300

版权

本文介绍了CSS中关于背景和边框的属性和用法，包括`background-color`用于设置背景颜色，`background-image`用于添加背景图片，`background-repeat`控制图片平铺方式，`background-size`调整图片大小，`background-position`定位背景图片，以及`border-radius`实现圆角效果。通过实例展示了各种属性的使用，帮助理解CSS背景和边框的设置。

摘要由CSDN通过智能技术生成

背景什么是背景？

CSS中的背景可以为HTML文件中设置一个背景图片或是为网页设置一些背景颜色，同时CSS背景可以定位你的背景图片在界面上的具体位置或大小

背景颜色

background-color属性定义了CSS中任何元素的背景颜色。该属性接受任何有效的<color>值，背景颜色可以延申到元素的内容及内边距。

.box {
   
  background-color: #ff6455;
}

h2 {
   
  background-color: black;
  color: white;
}
span {
   
  background-color: rgba(255,255,255,.5);
}

<div class="box">
  <h2>Background Colors</h2>
  <p>Try changing the background <span>colors</span>.</p>
</div>

结果：
在这里插入图片描述

在这里插入图片描述
HSL(色相，饱和度，亮度——hue,saturation,lightness)
饱和度0——100，如果饱和度取值为0则为灰色，亮度为0则为黑色，100则为白色。

（本图截自B站UP：DasAutoooo的CSS快速入门，感谢UP主的分享。）

背景图片

background-image属性允许在元素的背景中显示图像。

例如：

.a {
   
  background-image: url(balloons.jpg);
}

.b {
   
  background-image: url(star.png)

最低0.47元/天解锁文章