Skip to main content

WTF CSS极简教程: 5. 背景和边框

WTF CSS教程,帮助新人快速入门CSS。

推特@WTFAcademy_@0xAA_Science

WTF Academy社群: 官网 wtf.academy | WTF Solidity教程 | discord | 微信群申请

所有代码和教程开源在github: github.com/WTFAcademy/WTF-CSS


这一讲,我们介绍 CSS 的两种常用属性:背景(background)和边框(border),通过掌握这两个属性,构建出生动丰富的界面效果。

背景

背景颜色

background-color 属性用于定义元素的背景颜色,接受有效的色彩值。 背景色扩展到元素的内容(content)和内边距(padding)。 颜色值通常的定义方式如下:

  1. 十六进制,例如:"#fff"
  2. RGB,如"rgb(255, 0, 0)"
  3. 颜色名称,如"black"

代码实例:

div {
background-color: #fff;
background-color: rgb(255, 0, 0);
background-color: green;
}

背景图像

background-image 属性用于定义元素的背景图像,默认情况下图像是平铺重复显示,覆盖元素背景。

代码实例:(完整代码请查看html文件)

.bgi {
background-image: url(./img/wtflogo.png);
}

背景平铺

background-repeat 属性用于控制图像的平铺行为。常用的属性值包含以下几个:

  • repeat:图像在水平方向与垂直方向重复(默认)
  • repeat-x:图像在水平方向重复
  • repeat-y:图像在垂直方向重复
  • no-repeat:图像仅平铺一次

代码实例:(完整代码请查看html文件)

.bgr1 {
background-repeat: no-repeat;
}

.bgr2 {
background-repeat: repeat-x;
}

.bgr3 {
background-repeat: repeat-y;
}

.bgr4 {
background-repeat: repeat;
}

背景大小

background-size ,它可以设置长度或百分比值,使背景的大小以适应被填充背景的元素尺寸,常用的属性值包含以下几个:

  • 指定长度或百分比值:按指定大小渲染
  • auto:以图像的比例缩放作为背景,图像可能会重复展示
  • cover:图像扩展至足够大,使其完全覆盖整个区域,同时保持其高宽比,图像可能会被裁剪
  • contain:图像尽可能地缩放并保持宽高比例以适应整个背景区域。缩放会导致背景可能出现部分空白,空白区域会显示由background-color 设置的背景颜色。

代码实例:(完整代码请查看html文件)

<head>
<style>
.bgs > div {
width: 50em;
height: 30em;
border: 2px solid #000;
background-image: url(./img/balloons.jpeg);
}

.bgs1 {
background-size: auto;
}

.bgs2 {
background-size: cover;
}

.bgs3 {
background-size: contain;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="bgs">
<div class="bgs1">wtf-css</div>
<div class="bgs2">wtf-css</div>
<div class="bgs3">wtf-css</div>
</div>
</div>
</body>
  1. 原始背景图片的完整展示

    img

  2. auto:以图像的比例缩放作为背景,图像会重复平铺展示

    1666367277743

  3. cover:图像拓展至覆盖整个区域,保持比例。图像可能无法完整展示,出现部分溢出的情况。

    img

  4. contain:图像尽可能地缩放并保持宽高比例,使高度或宽度完全适应整个背景区域。缩放会导致背景可能出现部分空白区域,此时容器的空白区域会显示由background-color 设置的背景颜色。

    img

背景定位

background-position 用于设置背景图像的起始位置。框的左上角是 (0,0),框沿着水平 (x) 和垂直 (y) 轴定位。常见的设置方法如下:

  1. 可用任何长度单位,第二个位置(即Y轴方向)如果不声明,默认是50%(两个位置都不设置的话默认0% 0%)
  2. 位置关键字(left/right/top/bottom/center),可单双使用(第二个关键字如果不声明默认是center)
  3. 混合使用

代码实例:(完整代码请查看html文件)

  background-position: top center;
background-position: 20px 10%;
background-position: top 20px;

背景附加

background-attachment属性用于设置背景图像是否固定或者随着页面的其余部分滚动。 常见的属性值如下:

  • scroll:背景图片随网页滚动而移动(默认)
  • fixed:背景图片不会随网页滚动而移动
  • local: 背景图片会随着元素内容的滚动而滚动。

代码实例:(完整代码请查看html文件)

.bga1 {
background-attachment: scroll;
}

.bga2 {
background-attachment: fixed;
}

.bga3 {
background-attachment: local;
}

具体效果建议运行html文件,可以直观对比差异

背景简写

background属性可以实现简写,比单个子属性声明要简洁得多,可少写很多代码。而background子属性众多,到底如何安排子属性连写顺序也是一个难题。css2 推荐一条子属性连写顺序规则:

background: color image repeat attachment position/size

边框

border 可以为元素的所有四个边设置边框。也可以将border拆分为border-top, border-bottom, border-left, border-right,单独设置一条边。

border由width、style、color三个属性组成,其中width表示边框宽度,style表示边框样式(可以是实线、圆点、虚线等样式),color表示边框颜色。

具体语法如下:

.solid {
border: 3px solid red;
// 等价于
border-width: 3px;
border-style: solid;
border-color: red;
}

.dotted {
border: 3px dotted green;
}

.dashed {
border: 3px dashed blue;
}

圆角

border-radius 属性用于设置方框的圆角。可以使用两个长度或百分比作为值,第一个值定义水平半径,第二个值定义垂直半径。通常情况下

.radius {
border: 3px solid blue;
border-radius: 20px;
}

.top-right-radius {
border: 3px solid blue;
border-top-right-radius: 10px;
}

.circle {
border: 3px solid blue;
border-radius: 50%;
}

总结

这一讲我们介绍了背景和边框的常见属性和用法,理解并熟练运用这些属性,可以帮助你创建出更丰富、更有趣的网页设计。