[快速入门前端 24] CSS 常见属性(4) 背景和滑鼠动态属性

背景

我们之前介绍 CSS 颜色时有说过 background-color 可以指定元素的背景颜色，但其实在背景中除了颜色外我们还能做更多变化，下面就让我们花点篇幅看看背景相关的属性吧。

背景颜色 background color

属性名：background-color属性值：颜色 (包含关键字、色码、渐层等)

範例：

background-color: red;background-color: rgb(144, 0, 255);

背景图片 background image

属性名：background-image属性值：url("路径");

範例：

/* 绝对位置 */background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");/* 相对位置 */background-image: url("./img/01.png");

背景大小 background size

属性名：background-size属性值：auto (图片原本大小)、cover (背景图片填满容器)、contain (显示完整图片)、直接设定图片宽高

background-size 让我们可以指定背景图片的大小，不过在使用的时候也要注意图片比例与元素是否相同，若不同时仍设定宽高百分比则容易造成图片变形。

範例：

.color1 {    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");    background-size: auto;}.color2 {    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");    background-size: cover;}.color3 {    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");    background-size: contain;}.color4 {    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");    background-size: 100% 100%;}

结果：

(图片来自 Nike 官网)

背景重複 background repeat

属性名：background-repeat属性值：repeat (预设，图片依 x, y 轴重複)、repeat-x (背景图片沿 x 轴重複)、repeat-y (背景图片沿 ｙ 轴重複)、no-repeat (不重複)

当背景图片小于元素时，会预设重複直到填满整个元素的範围，而 background-repeat 则可以指定是否重複及重複方向。

範例：

.color1 {    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");    background-size: 65px;}.color2 {    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");    background-size: 65px;    background-repeat: repeat-x;}.color3 {    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");    background-size: 65px;    background-repeat: repeat-y;}.color4 {    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");    background-size: 65px;    background-repeat: no-repeat;}

结果：

背景原点 background origin

属性名：background-origin属性值：padding-box (预设，以 padding 区左上角为原点)、border-box (以 border 区左上角为原点)、content-box (以内容区左上角为原点)

範例：
下图是一个同时有 border、padding、及 content 的元素，可以很明显看出三种值的不同

背景位置 background position

属性名：background-position属性值：水平方向 (left、center、right)、垂直方向 (top、center、bottom)、CSS 长度单位

background-position 主要用来指定背景图片的对齐方式，语法为 background-position: 水平对齐方式 垂直对齐方式，预设为左上 (也就是 left top)。属性值除了使用方向关键字外也可以填入百分比、绝对单位，这时背景会以原点 (baground-origin) 为参考点进行偏移。

範例：

.color1 {    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");    background-size: 65px;    background-repeat: no-repeat;    background-position: right bottom;}.color2 {    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");    background-size: 65px;    background-repeat: no-repeat;    background-position: 15px 30px;}.color3 {    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");    background-size: 65px;    background-repeat: no-repeat;    background-position: 15% 30%;}.color4 {    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");    background-size: 65px;    background-repeat: no-repeat;    background-position: center;}

结果：
水平垂直置中因为写法为 center center，所以可简写为 center

背景裁剪 background clip

属性名：background-clip属性值：border-box (预设，裁剪边框区域以外的背景)、padding-box (裁剪 padding 区以外的背景)、content-box (裁剪内容区以外的背景)、text (裁剪文字範围外的背景)对背景颜色及背景图片皆有效裁剪指定区域以外的背景指的是在 box model 中由内到外的顺序，例如 padding-box 会裁剪 border 範围和元素外的背景，只保留在 padding 区和 content 区的背景text 裁剪文字区外的背景需在文字颜色设定为透明 (transparent) 时才有效

範例：

.box1 {    background-clip: border-box;}.box2 {    background-clip: padding-box;}.box3 {    background-clip: content-box;}.box4 {    -webkit-background-clip: text; /* 由于 text 为实验性用法，必须在前面加入浏览器前缀 */}

背景 background

属性名：background属性值：是所有背景相关属性的複合属性，可指定背景颜色、图片、位置、重複方向等值

语法:

background: 背景颜色 背景图片 重複 图片位置 / 大小 原点 背景剪切;

範例：

background: green; /* 只指定颜色 */background: lightblue no-repeat bottom right url("./img.png"); /* 指定颜色、图片、重複、位置 */

滑鼠相关属性

cursor

cursor 可以设定滑鼠移到该元素上方时游标的样式。

属性名：cursor属性值：pointer (最常见)、crosshair (十字)、text (input 样式)、move、wate 等在开发中最常见的是将自定的 button 加入 cursor: pointer 呈现小白手手的样式cursor 也支援自订样式，只要将属性值替换为图片连结即可，如 url("./img.png")

更多滑鼠样式可以参考：MDN Cursor

---

上一篇：[快速入门前端 23] CSS 常见属性(3) 边框、表格及列表属性
下一篇：[快速入门前端 25] HTML 元素的 Display 方式
系列文章列表：[快速入门前端] 系列文章索引列表