背景属性

辉哥大约 5 分钟

CSS 背景键值语法

以下为学习过程中的极简提炼笔记，以供重温巩固学习

学习路线&目的

掌握 CSS背景属性，熟练运用
掌握通过浏览器反查 CSS元素，熟练运用 CSS 元素制作样式，熟练CV

CSS背景属性

通过 CSS 背景属性，可以给页面元素添加背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

背景颜色 background-color

CSS 使用 background-color 属性定义元素的背景颜色

background-color:颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色

background-color:transparent;

语法格式案例

背景颜色

<head>
  <style>
    div {
      width: 200px;
      height: 200px;
      /* background-color: transparent;   透明的 清澈的  */
      /* background-color: red; */
      background-color: pink;
    }
    </style>
</head>

<body>
  <div></div>
</body>

背景图片 background-image

CSS 使用 background-image 属性定义元素的背景图片

实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片
优点是非常便于控制位置(精灵图也是一种运用场景)
注意：背景图片后面的地址，千万不要忘记加 URL，同时里面的路径不要加引号

属性值	效果作用
none	无背景图（默认）
url	使用绝对或相对地址指定背景图像

语法格式案例

背景图片

<head>
  <style>
    div {
      width: 300px;
      height: 300px;
      /* 不要落下 url()   */
      background-image: url(images/logo.png);
    }
  </style>
</head>
<body>
    <div></div>
</body>

背景平铺 background-image

CSS 使用 background-repeat 设置元素背景图像的平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

属性值	效果作用
repeat	背景图像在纵向和横向上平铺（默认）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

语法格式案例

背景平铺

<head>
  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: pink;
      background-image: url(images/logo.png);
      /* 1.背景图片不平铺 */
      /* background-repeat: no-repeat; */
      /* 2.默认的情况下,背景图片是平铺的 */
      /* background-repeat: repeat; */
      /* 3. 沿着x轴平铺 */
      /* background-repeat: repeat-x; */
      /* 4. 沿着Y轴平铺 */
      background-repeat: repeat-y;
      /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
    }
    </style>
</head>

<body>
  <div></div>
</body>

背景位置-方位

CSS 使用设置元素背景

语法格式案例

背景

<head>
  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: pink;
      background-image: url(images/logo.png);
      background-repeat: no-repeat;
      /* background-position:  方位名词; */
      /* background-position: center top; */
      /* background-position: right center; */
      /* 如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 */
      /* background-position: center right; */
      /* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 */
      /* background-position: right; */
      /* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 */
      background-position: top;
  }
    </style>
</head>

<body>
    <div></div>
</body>

背景位置-精确单位

CSS 使用设置元素背景

语法格式案例

背景

<head>
  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: pink;
      background-image: url(images/logo.png);
      background-repeat: no-repeat;
      /* 20px 50px; x轴一定是 20  y轴一定是 50 */
      /* background-position: 20px 50px; */
      /* background-position: 50px 20px; */
      background-position: 20px;

    }
  </style>
</head>

<body>
    <div></div>
</body>

背景位置-混合单位

CSS 使用设置元素背景

语法格式案例

背景

<head>
  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: pink;
      background-image: url(images/logo.png);
      background-repeat: no-repeat;
      /* 20px center  一定是x 为 20  y 是 center  等价于   background-position: 20px */
      /* background-position: 20px center; */
      /* 水平是居中对齐  垂直是 20 */
      background-position: center 20px;

    }
  </style>
</head>

<body>
    <div></div>
</body>

背景位置-固定

CSS 使用设置元素背景

语法格式案例

背景

<head>
  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: pink;
      background-image: url(images/logo.png);
      background-repeat: no-repeat;
      /* 20px center  一定是x 为 20  y 是 center  等价于   background-position: 20px */
      /* background-position: 20px center; */
      /* 水平是居中对齐  垂直是 20 */
      background-position: center 20px;

    }
  </style>
</head>

<body>
    <div></div>
</body>