CSS Background 背景

前言

  • CSS 背景属性用于定义 HTML 元素的背景。
属性 描述 CSS 备注 🔗
background 简写属性,作用是将背景属性设置在一个声明中 1 🔗
background-color 设置元素的背景颜色 1 🔗
background-image 把图像设置为背景 1 🔗
background-repeat 设置背景图像是否及如何重复 1 🔗
background-attachment 背景图像是否固定或者随着页面的其余部分滚动 1 🔗
background-position 设置背景图像的起始位置 1 🔗
background-size 指定背景图片的大小 3 🔗
background-origin 指定背景图像的定位区域 3 🔗
background-clip 指定背景图像的绘画区域 3 🔗

1、简写属性

  • 我们可以看到页面的背景颜色通过了很多的属性来控制。

  • 为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中。

属性 描述 CSS 备注 🔗
background 简写属性,作用是将背景属性设置在一个声明中 1 🔗
  • 属性值
说明
background-color 指定要使用的背景颜色
background-image 指定要使用的一个或多个背景图像
background-size 指定背景图片的大小
background-origin 指定背景图像的定位区域
background-clip 指定背景图像的绘画区域
background-repeat 指定如何重复背景图像
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动
background-position 指定背景图像的位置
  • 当使用简写属性时,属性值的顺序为:

    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position
  • 以上属性无需全部使用,你可以按照页面的实际需要使用。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <style>
    body {
    margin-left: 200px;
    background: #5d9ab2 url('https://demo.qianchia.com/media/image/demo2.png') no-repeat top left;
    }
    .container {
    text-align: center;
    }
    .center_div {
    border: 1px solid gray;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    background-color: #d0f0f6;
    text-align: left;
    padding: 8px;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <body>
    <div class="container">
    <div class="center_div">
    <h1>Hello World!</h1>
    </div>
    </div>
    </body>
  • 效果

2、背景颜色

属性 描述 CSS 备注 🔗
background-color 设置元素的背景颜色 1 🔗
  • 属性值
描述
color 指定背景颜色。在 CSS 颜色值近可能的寻找一个颜色值的完整列表
transparent 指定背景颜色应该是透明的。这是默认
inherit 指定背景颜色,应该从父元素继承
  • 页面的背景颜色使用在 body 的选择器中。

  • CSS 中,颜色值通常以以下方式定义:

    • 十六进制,如:”#ff0000”
    • RGB,如:”rgb(255, 0, 0)”
    • 颜色名称,如:”red”
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
    h1 {
    background-color: #6495ed;
    }
    p {
    background-color: #e0ffff;
    }
    div {
    background-color: #b0c4de;
    }
    </style>
    1
    2
    3
    4
    5
    6
    <h1>CSS background-color 实例!</h1>
    <div>
    该文本插入在 div 元素中。
    <p>该段落有自己的背景颜色。</p>
    我们仍然在同一个 div 中。
    </div>
  • 效果

3、背景图像

属性 描述 CSS 备注 🔗
background-image 把图像设置为背景 1 🔗
  • 属性值
说明 🔗
url(’URL’) 图像的 URL
none 无图像背景会显示。这是默认
linear-gradient() 创建一个线性渐变的 “图像”(从上到下) 🔗
radial-gradient() 用径向渐变创建 “图像”。(center to edges) 🔗
repeating-linear-gradient() 创建重复的线性渐变 “图像” 🔗
repeating-radial-gradient() 创建重复的径向渐变 “图像” 🔗
inherit 指定背景图像应该从父元素继承
  • 默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体。

  • 实例

    1
    2
    3
    4
    5
    <style>
    body {
    background-image: url('https://demo.qianchia.com/media/image/demo3.png');
    }
    </style>
    1
    2
    3
    <body>
    <h1>Hello World!</h1>
    </body>
  • 效果

3.1 水平或垂直平铺

属性 描述 CSS 备注 🔗
background-repeat 设置背景图像是否及如何重复 1 🔗
  • 属性值
说明
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image 不会重复
inherit 指定 background-repea 属性设置应该从父元素继承
  • 默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调。

  • 如果图像只在水平方向平铺(repeat-x),或者垂直方向平铺(repeat-y),页面背景会更好些。

  • 实例

    1
    2
    3
    4
    5
    6
    <style>
    body {
    background-image: url('https://demo.qianchia.com/media/image/demo3.png');
    background-repeat: repeat-x;
    }
    </style>
    1
    2
    3
    <body>
    <h1>Hello World!</h1>
    </body>
  • 效果

3.2 设置定位与不平铺

  • 为了让页面排版更加合理,不影响文本的阅读,可以利用 background-position 属性改变图像在背景中的位置。
属性 描述 CSS 备注 🔗
background-position 设置背景图像的起始位置 1 🔗
  • 属性值
描述
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
如果仅指定一个关键字,其他值将会是 “center”
x% y% 第一个值是水平位置,第二个值是垂直。左上角是 0%0%。右下角是 100%100%。如果仅指定了一个值,其他值将是 50%。默认值为:0%0%
xpos ypos 第一个值是水平位置,第二个值是垂直。左上角是 0。单位可以是像素(0px0px)或任何其他 CSS 单位。如果仅指定了一个值,其他值将是 50%。你可以混合使用 % 和 positions
inherit 指定 background-position 属性设置应该从父元素继承
  • 不设置

    1
    2
    3
    4
    5
    6
    <style>
    body {
    background-image: url('https://demo.qianchia.com/media/image/demo2.png');
    background-repeat: no-repeat;
    }
    </style>
    1
    2
    3
    <body>
    <h1>Hello World!</h1>
    </body>
  • 设置背景图像起始位置

    1
    2
    3
    4
    5
    6
    7
    <style>
    body {
    background-image: url('https://demo.qianchia.com/media/image/demo2.png');
    background-repeat: no-repeat;
    background-position: center top;
    }
    </style>
  • 效果

      

4、CSS 实例

文章目录
  1. 1. 前言
  2. 2. 1、简写属性
  3. 3. 2、背景颜色
  4. 4. 3、背景图像
    1. 4.1. 3.1 水平或垂直平铺
    2. 4.2. 3.2 设置定位与不平铺
  5. 5. 4、CSS 实例
隐藏目录