手把手带你了解CSS 背景属性(Background)

导读 在制作网页时我们往往需要在网页中添加一些背景颜色、背景图像让网页更加美观,吸引访问者的眼球。CSS中.....
在制作网页时,我们经常需要在网页中添加一些背景颜色和背景图像,使网页更加美观,吸引访问者的注意。CSS 该系列用于设置 HTML 元素背景效果的属性,本文将带您谈谈CSS 背景属性,希望对大家有所帮助!

CSS 背景属性

  • (Background)
用于属性名CSS 版本浏览器支持
1.在声明中设置 所有背景属性background1IE8- 不支持多个背景图像。IE7- 不支持"inherit"。
2.是否有背景图像 固定或者页面的其他部分 滚动background-attachment1IE 属性值不支持 “inherit”。
3.元素的 背景颜色background-color1IE 属性值不支持 “inherit”。
4.元素的 背景图像background-image1IE 属性值不支持 “inherit”。
5.背景图像 开始位置background-position1IE 属性值不支持 “inherit”。
6.是管怎样 重复背景图像。background-repeat1IE 属性值不支持 “inherit”。
7.背景的 绘制区域background-clip3都支持,IE8- 不支持。
8.背景图片 定位区域background-origin3都支持,IE8- 不支持。
9.背景 图片的尺寸background-size3都支持,IE8- 不支持。

1. background 属性: 一次性 集中定义 8个 背景相关属性

  • 关键点
    • 背景 颜色
    • 背景图像 位置
    • 背景图像 尺寸
    • 背景图像 重复
    • 背景图像 定位位置
    • 背景 绘制区域
    • 背景图像 固定和滚动
    • 要使用的 背景图像
    • 继承
<style type="text/css">     body     {      background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;      } </style>
  • 一个元素 多个背景图像 浏览器支持

    • IE8 以及更早的浏览器 不支持
    • 即 指定对个 背景图像的资源地址
  • background 属性 “inherit” 浏览器支持

    • IE7 以及更早的浏览器 不支持 “inherit”。
    • IE8 需要!DOCTYPE
    • IE9 支持 “inherit”。

  • ⑶ 在声明中,设置 所有的 背景属性
    • 简写属性 集中定义: 是一种 CSS 简写属性,用于一次性 集中定义 包括各种背景属性 color, image, originsize, repeat 方法等。css视频教程】
      • 背景 background 简写属性
      • 背景 属性
      • 包含 其他 8 个 背景属性

  • 背景background的 属性值
    • 包含 其他 8 个 背景属性
      • 可设置如下 属性值和属性值
        • 多个 属性值之间 空格 隔开
        • 背景层 分隔: 指定 多个背景层 时,使用 逗号分隔 每个背景层
          • 是一种 CSS 用于简写属性 一次性 集中定义 包括各种背景属性color, image, originsize, repeat 方法等。(每个属性的含义,可以先学习后面的内容 可以理解)
            • background-color
            • background-position
            • background-size
            • background-repeat
            • background-origin
            • background-clip
            • background-attachment
            • background-image
            • inherit
              • 继承
      • 背景background的 属性值省略
        • 如果不设置 其中的某个值,也不会出问题
        • 比如 background:#ff0000 url('smiley.gif');也是允许的。
      • 背景简写 默认值
        • 没有指定 具体默认值
        • not specified
        • 对于所有的简写属性,任何 没有指定值 它们将被设定为它们 初始值。

  • 每个 背景语法
    • 下列值在每层中 可以出现 0 次或 1 次:
      • 每一背景层, 最多只能 属性出现一次
        • ① 背景图像的 固定和滚动: background-attachment
        • ② 背景图像: background-image
        • ③ 背景图像 位置: background-position
        • background-size
        • ⑤ 背景图像 重复方式: background-repeat

  • 限定的 代码位置
    • background-size 的 代码位置
      • background-size 只能 紧跟在 背景位置 background-position 以后出现,以"/"分割
        • 如: “center/80%”.
    • background-clipbackground-origin 可能 出现的次数
      • 0 次、1 次或 2 (最多两次)
        • 如果 出现 1 次:
          • 同时设定 background-originbackground-clip
        • 如果 出现 2 次:
          • 第一次出现 设置 background-origin,第二次出现 设置 background-clip
    • 背景颜色 background-color的 代码位置
      • 只能包含在内 最后的背景层。
      • 只能在background最后 一个属性上 定义,因为 整个元素 只有一种 背景颜色

  • 背景background 的继承性

    • 不继承
    • no
  • 尽量使用 背景background属性

    • 设置背景 技巧: 建议使用 简写属性,而不是使用 单个属性
    • 支持旧浏览器: 这个简写属性, 可以在老浏览器中获得 更好的支持
    • 代码少: 需要键入的 字母也更少。
  • 背景简写background的版本

    • CSS1 CSS3
  • 背景简写background 的JavaScript 语法

    • object.style.background="white url(paper.gif) repeat-y"

  • 背景简写background的 浏览器支持

在这里插入图片描述


  • 示例1: 与背景相关的属性 在一个属性background中 集中定义.
p{   /*background-image: url(../images/四叶草背景.png);*/  /*background-repeat: no-repeat;*/    /*第一个值 水平位置,第二个值 垂直位置*/  /*background-position: 50px 100px; */       /*背景固定*/  /*background-attachment: fixed;*/  /*background-color: yellow; */   background: url(../images/四叶草背景.png) no-repeat 50px 100px;  }

在这里插入图片描述


2. background-color 属性: 元素的 背景颜色 (纯色,范围到 边框区的 外边缘)

  • 元素的 背景颜色: background-color
    • 设置元素的 背景颜色
      • 将设置元素 背景色, 属性的值为 颜色值或关键字"transparent"二者选其一.
      • 设置一种 纯色
    • 使用 background-color 属性
    • 背景颜色 属性

  • 背景颜色的 填充范围
    • 元素的 内容内边距边框区域
      • ① 扩展到元素 边框的 外边界
        • (但不包括 外边距)。
      • ② 如果 边框 有透明 部分(如 虚线 边框)
        • 会透过这些 透明部分 显示背景色

  • 背景颜色 语法

    • background-color:color_name red |hex_number #ff0000| rgb_number rgb(255,0,0)| transparent| inherit;
  • 语法示例

/* 关键字 或 颜色名 Keyword values */ background-color: red; background-color: indigo;  /* 十六进制值 Hexadecimal value  (设置透明值 和 不设置 不透明值) */ background-color: #bbff00;    /* 完全不透明 Fully opaque (不设置 不透明值)*/ background-color: #bf0;       /* 完全不透明 简写 Fully opaque shorthand (不设置 不透明值)*/ background-color: #11ffee00;  /* 完全透明 Fully transparent (设置 不透明值)*/ background-color: #1fe0;      /* 完全透明的 简写 Fully transparent shorthand (设置 不透明值) */ background-color: #11ffeeff;  /* 完全不透明 Fully opaque (设置 不透明值)*/ background-color: #1fef;      /* 完全不透明 简写 Fully opaque shorthand (设置 不透明值) */  /* RGB value */ background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */ background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 50% transparent (设置 不透明值)*/  /* HSL value */ background-color: hsl(50, 33%, 25%);         /* 完全不透明 Fully opaque */ background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent (设置 不透明值)*/  /* 特殊关键词 Special keyword values */ background-color: currentcolor; background-color: transparent;  /* 全局性的值 Global values */ background-color: inherit; background-color: initial; background-color: unset;

  • 背景颜色 属性值
    • 关键点: 颜色名 十六进制 rgb代码 透明 继承

    • 颜色名: color_name

      • 颜色值为 颜色名称的背景颜色
        • (比如 red)。
    • 十六进制: hex_number

      • 颜色值为 十六进制值的背景颜色
      • (比如 #ff0000)。
    • rgb: rgb(),rgba()

      • 颜色值为 rgb 代码的背景颜色
        • (比如 rgb(255,0,0)
    • hsl:hsl(),hsla()

    • 透明 (无色,默认值): transparent

      • 背景颜色为 透明色 。
        • 该颜色 看上去将是 背景色。从技术上说,它是带有 阿尔法通道 黑色是最小值,是的rgba(0,0,0,0)的简写。
      • 严格来说, 透明色,也是 一种颜色.
    • 继承:inherit

      • 继承父元素 background-color 属性的设置

  • 背景色继承
    • 不继承
    • no
  • 背景颜色 css 版本
    • CSS1
  • JavaScript 语法
    • object.style.backgroundColor="#00FF00"

  • 背景颜色 和 可访问性
    • 可访问性 问题
    • 对比度: 要确保 背景颜色 和 文本颜色 之间的 对比度足够高 视觉条件差的人 能够阅读 页面内容。
    • 颜色对比度
      • 是通过 比较文本的亮度 和 背景颜色值 来确定的。
        • 满足当前的需要 Web 内容可访问性标准(WCAG)
        • 文本内容的比例: 4.5:1
        • 文本较大(如标题)的比例为 3:1
        • 大文本定义为18.66px,粗体bold或更大,24px或更大。

  • 实用工具: WebAIM: 对比检查器 Contrast Checker (网页版)
    • 检查 文字颜色 和 背景颜色,看是否 能很好的满足 用户的视觉需求


在这里插入图片描述


  • 用户的感知 和 可访问性
    • Perceivable - Accessibility | MDN(英文版 待翻译)
      • 提供关于如何写作的信息 web 内容的实用建议符合要求 web 内容可访问性指南(WCAG) 2.0和2.1的 可感知原则 列出的成功标准。
      • 感知状态: 是指用户 必须能够 以某种方式感知它,并使用它们 一种或多种感官。

  • 背景图像 和 背景颜色
    • 图像 覆盖在 颜色上方: 背景图像,覆盖 上面的背景色.
    • 统一的背景色、背景色 是在指定的 背景图像后 呈现的
      • 尽管颜色 还能通过 图像中的任何透明度 看到。

  • 背景颜色background-color 的 浏览器支持

在这里插入图片描述


  • 示例1: 同时显示 背景图像 和 背景颜色

    • 背景图像,覆盖 上面的背景色.
  • css

.bgimg-fixed {      background-color: pink;         background-image: url(../images/四叶草背景.png);         background-repeat: no-repeat;  }

在这里插入图片描述


  • 示例2: 十六制值 颜色, 设置透明值. (最后两个,每个值: 0-f)
    • 改变透明度 (即 最后 多加的 两位值),颜色 也会随之改变)
      • 00: 完全透明,看不到颜色,就像没有颜色一样.
      • ff: 就是 纯红相当于没有添加 透明值.
    /*把十六进制 设置透明值 红色,最后两位的 33 就是透明值*/     background-color: #ff000066;     background-image: url(../images/四叶草背景.png);     background-repeat: no-repeat;  }

在这里插入图片描述


3. background-image 属性: 背景图像 (范围到 内边距区的 外边,不含 边框)

  • 背景图像:

    • 为一个元素 设置 一个或多个 背景图像。
      • background-image 属性
      • 背景图像 属性
  • 元素的 背景范围

    • 背景色: background-color

      • 背景色 默认到 边框区的 外边缘
      • 边框区下方 会显示 背景色,虚线边框,可以直接看到 边框下的背景色

    在这里插入图片描述

    • 背景图像: background-image

      • 背景图像 不重复时 (background-repeat:no-repeat;),图像 默认在 内边距区的 外边缘
        • 不在边框区,也不会显示在 边框的下方 (下面没有背景图像的特殊加粗边框).

在这里插入图片描述

  • 背景图像的 位置

    • 元素的 左上角: 默认情况下,背景图像的位置 位于 元素的 左上角
    • 重复: 在 水平和垂直方向 重复
  • 背景图像的 语法

    • background-image: none|url('URL')|inherit;

  • 背景图像的 属性值
    • 关键点:路径url 不显示 继承
      • 图像路径/地址: url('URL')
        • 指向 图像的路径,简单的 静态图像,用 URL引用
        • url值 带引号.
      • 无图像 (默认值): none
        • 不显示 背景图像。
          • 如果一个 指定的图像 不能画,浏览器会 设置相当于其值 none
            • (例如,指定 URI 所表示的文件 不能加载)
      • 继承: inherit
        • 从父元素 继承 background-image 属性设置。
      • 渐变图像
        • gradient 相关的方法 生成的 渐变图像

  • 不能使用背景图像 预防措施 (回退)
    • 设置 背景颜色:
      • 设置一种 可用的背景颜色 background-color
        • 假如 背景图像不可用,页面也可以获得 视觉效果好。
    • 背景色不显示 也要设置 (图像退回):
      • 即使图像不透明,背景色 通常情况下 它不会显示,开发者仍然应该 指定 背景颜色 background-color 属性。
      • 如果图像不能加载-例如,当网络连接断开时-背景色 它将被绘制。

  • 背景图像 相关属性
    • 设置 背景图像: background-image

      • 在元素的背景下 设置图像
    • 图像的 重复方式: background-repeat

      • 可以 沿着某个轴(x 轴或 y 轴)平铺重复,或根本不重复。
    • 图像的 位置:background-position

      • 根据 background-position 放置属性值。
    • 图像/背景色 裁剪/绘制 区域: background-clip


  • 多背景图像 使用
    • 逗号 分隔: 一个background-image指定 使用多个背景图像 逗号,分隔 多个背景地址.
    • z 方向 堆叠: 图像以绘制时 z 方向 堆叠。
    • 代码在前面,显示在上面: 先指定图像 以后指定的图像 上面绘制。
      • 因此 指定的 最接近用户的第一个图像。

  • 背景图像 相对位置

    • 边框在 在背景图像之上:
      • 元素的边框 border会在 在背景图像之上 被绘制
    • 背景颜色 在背景图像下:
      • 背景颜色 background-color 会在 在背景图像下 绘制。
    • 位置关系: 边框(顶部,最接近用户) > 背景图像 > 背景颜色
      • 背景图像 无法覆盖 边框
      • 背景颜色 无法覆盖 背景图像
  • 图像和盒子:

    • 图像的绘制 与 盒子 以及 盒子的边框 关系,需要在 CSS 属性 background-clipbackground-origin中定义。

  • 示例1: 同时设置 两张背景图片
#lizard{  background-image: url("../images/lizard.png"), url("../images/star.png"); }
  • 两个都是 矢量图,图片背景 都是透明的
    • 代码在前面,显示在上面: 代码在前面 图像显示在上面.
    • 假如背景图像 背景 不透明(例如 其他部分 是白色 ≠透明色),可能会完全覆盖下面的图像.

在这里插入图片描述


  • 示例2: 同时设置 和 分别设置 不同的 重复方式.
#lizard{  background-image: url("../images/四叶草背景.png"), url("../images/lizard.png");  background-repeat: no-repeat,repeat; }

在这里插入图片描述

  • 背景不透明 遮盖性:
    • 因为 四叶草 不是透明的背景图片(整个图片 其余部分是 白色).所以除了 四叶草 ,其余部分 也遮盖了一部分 下方的图像.

  • 关联知识: <image> css 图像 数据类型
    • CSS的<image> 图像 数据类型
      • 描述的是 2D 图形
      • 表示一个 二维 图像
    • CSS 中的 两种图像
      • ① 简单的 静态 图像
        • 经常用URL引用
      • 动态生成 的 图像
        • 比如 DOM 树的部分元素 样式渐变 或者 生成计算样式
        • 使用 gradient 相关的方法 或element()生成
      • 附加的 CSS图像函数
        • 包括image()image-set()cross-fade()

  • 图像搭配的 CSS属性

    • background-imageborder-imagecontentcursorlist-style-image
    • 一个 < image > CSS 图像 数据类型 的分类
      • <image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
      • 使用url()方法: (常用,熟记)
        • url 引用的图像
      • gradient 相关的方法 生成的图像 (常用,熟记)
      • element()方法: (实验中 方法)
        • 定义页面的一部分element()方法中;

      在这里插入图片描述

      • image() 函数 (实验中 方法)
        • image()函数定义的 图像,图像片段 或 实色块的颜色

      在这里插入图片描述

      • ⑤ cross-fade() 函数
        • cross-fade() 函数 定义的 两个或多个图像的 混合。

      插入图片描述

      • ⑥ image-set() 函数
        • 根据 image-set() 选择函数定义的分辨率图像。
  • 图像类型值 浏览器支持

在这里插入图片描述

  • 更多详情: <image> CSS 图像 数据类型


  • 有效的 图像引用值:
/* url()方法, 只要 test.jpg 是图像文件*/ url(test.jpg)     /*一个 <gradient> 标签*/  linear-gradient(to bottom, blue, red)    /*页面的一部分, 使用了element()方法,如果 colonne3 它是存在于页面中的元素id即可*/ element(#colonne3)         image(ltr 'arrow.png#xywh=0,0,16,16', red)                              /* <url>的一个16x16节从左上角开始 图像只要arrow.png 是支持图像,否则是固体图像 红色的样布。如果语言是rtl,图像水平翻转. */  cross-fade(20% url(twenty.png), url(eighty.png))                              /* 交叉褪色图像,其中20%是不透明的 80%不透明. */  image-set('test.jpg' 1x, 'test-2x.jpg' 2x)                               /* 分辨率不同 图像的选择 */

4. background-attachment 属性: 背景图像的 固定和滚动

  • 设置 背景图像的 附着方式 (固定/滚动)
    • 附着背景图像 background-attachment 属性
      • 决定 背景图像的位置 是 在窗口内 固定,还是 随着 包含它的块 滚动。
    • 背景图像 附着方式 属性

  • 附着背景图像 background-attachment的属性值
    • 关键点: 滚动 固定 继承
      • 滚动(默认值): scroll

        • 背景图像 会随着 页面的其余部分 滚动和移动。
          • 跟着元素 一起滚动: (但 如果这个元素的内容 可滚动, 不跟 元素的内容 一起滚动)
            • 背景 相对于 元素本身 固定(跟随元素 一起滚动), 而不是 随着 元素的内容 滚动(元素边框 因为 它实际上 附加在 元素的边框)。
            • (注意区分: 相对于 元素,还是相对于 元素的内容,因为有些元素 不仅仅会 随着页面的滚动,元素本身 也可能是 可滚动的 ,还有一个滚动条. )
      • 固定: fixed

        • 当页面的其余部分 滚动时,背景图像 不会移动。
        • 背景 相对于视口 固定。
          • 即使 一个元素 有滚动机制,背景不会 元素的内容 滚动。
          • 不跟元素(或 元素) 一起滚动
            • 元素 滚动时,背景图像的位置 不变
            • 元素 滚动后,如果 元素内容的位置不在 背景图像 覆盖位置,然后针对此 背景图像设置元素 不再显示.
      • 相对于元素内容 固定: local

        • 表示背景 相对于元素的内容 固定。
        • 跟着元素 一起滚动: 假如一个元素 有了滚动机制,背景就会 随着 元素的内容 滚动 ,
          • 并且 绘制区制区和定位区 是相对于 可滚动区域 不包括他们的边框。
      • 继承 父元素: inherit

        • 从父元素 继承,决定 背景图像的 固定或滚动。(听爸爸的话…)

  • 附着背景图像 语法
    • background-attachment: scroll|fixed|local|inherit;
/* Keyword values */ background-attachment: scroll; background-attachment: fixed; background-attachment: local;  /* Global values */ background-attachment: inherit; background-attachment: initial; background-attachment: unset;

  • 附着背景图像 继承性
    • 不继承
    • no
  • background-attachment的 版本
    • CSS1
  • 背景图像 附着的 JavaScript 语法
    • object.style.backgroundAttachment="fixed"

  • 附着背景图像 background-attachment的 浏览器支持

在这里插入图片描述

注:任何版本 Internet Explorer (包括 IE8)不支持属性值 “inherit”。


  • 示例1: 背景图像 在固定位置显示,不跟随元素 页面一起滚动
  • css
.bgimg-fixed{  background-image: url(../images/四叶草背景.png);  background-attachment: fixed;  background-repeat: no-repeat; }
  • html
    <p class="bgimg-fixed">《花儿为什么这样红》是电影《冰山上的来客》中的一首着名插曲,是塔吉克民歌改编而来。影片来自真假古兰丹姆 从与战士阿米尔的爱情悬念出发,讲述了边疆战士和杨排长的故事 阿米尔和真古兰丹姆一起与特务假古兰丹姆斗智斗勇。 也能重逢的故事。该片描绘了 边疆地区军民惊险的反特斗争生活。作曲家雷振邦先生的电影音乐往往以民间音乐材料为主题,也以民歌为基础,具有浓郁的民族风格和地域特色。《为什么花这么红》原本是一首古老的塔吉克民歌,后来由雷振邦先生改编成电影《冰山上的游客》。插曲展现了一个驻扎在新疆唐古拉山的解放军边防战士和一个当地女孩的爱情故事。主要参考古塔吉克民间歌曲《古力碧塔》。《古力碧塔》讲述了一个为商人着急的塔吉克年轻人爱上了喀布尔城的一位公主的故事,但遭到了反对。年轻人只能沿着古丝绸之路漫步,把美丽凄凉的歌声传遍所有路过的地方,最后传回帕米尔高原的故乡。</p>

在这里插入图片描述

  • 背景图像 一直显示 固定位置: fixed

    • 元素内容 滚动时,背景图像的位置保持不变
    • 元素内容 滚动后,如果元素内容的位置,不在 背景图像 覆盖位置,然后针对此 背景图像设置元素 不再显示.
  • 跟着元素 一起滚动: scroll(默认值)
    在这里插入图片描述


  • 示例2: 多背景图 支持

    • background-attachment属性 支持 多张背景图片。
      • 对应 对背景图片: 用 逗号分隔 来为 每一张背景图片 指定不同的background-attachment
      • 顺序对应: 每一张背景图片 顺序对应 相应的 background-attachment 类型。
  • css

.bgimg-fixed{  background-image:url(../images/greenbgimage.jpg), url(../images/四叶草背景.png);  background-attachment: fixed,scroll;  background-repeat: no-repeat,repeat-y; }

在这里插入图片描述


5. background-position 属性: 背景图像的 位置 (先水平,后垂直, 关键词,百分比,长度值)

  • 背景图像的 位置:
    • 每一张背景图片 设置 初始位置。
      • 这个位置是 相对于由 background-origin 定义的 位置图层。
      • 背景图像 如果要重复background-repeat,将 从这一点开始
      • background-position 属性
        • 背景图像位置 属性

  • 背景图像位置 使用注意事项
    • 需要设置 固定背景图像 background-attachment="fixed"
    • 确保背景位置 属性
      • 在 Firefox 和 Opera 正常工作。

  • 背景图像位置 语法
    • background-position: x% y%| xpos ypos|(left center right)X (top center bottom);
/* 关键词 Keyword values */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center;  /* 百分比值 <percentage> values */ background-position: 25% 75%;  /* 长度值 <length> values */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em;  /* 多背景图片 的位置 Multiple images */ background-position: 0 0, center;  /* 指明 距离 上下左右边缘 的距离. Edge offsets values */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px;  /* 全局支持值 Global values */ background-position: inherit; background-position: initial; background-position: unset;

  • 背景图像位置 属性值 (关键词,百分比,长度值,混用)
    • 关键词: left center right x top center bottom
      • 两个值: 先水平,后垂直,省略一个 是 居中center
        • 水平方向:左、中、右
          • left center right
        • 垂直方向:上、中、下
          • top center bottom
    • 百分比: x% y%
      • 相对于 :左边缘的 x 与上边缘相比,坐标 y 坐标
        • 默认值:0% 0%
      • 两个值: 先水平,后垂直,省略一个 是 居中50%
        • 水平位置: x%
          • 第一个值
        • 垂直位置: y%
          • 第二个值
        • 左上角: 0% 0%
        • 右下角: 100% 100%
      • 百分比值 无效的情况:
        • 如果 背景图片的大小 和 容器 同样,设置 百分比的值 它将永远无效,因为容器和图片 差”为0
          • (图片 永远填满容器 图片的相对位置 和 容器的相对位置 永远重叠)。
        • 使用绝对值: 在这种情况下,需要偏移 使用绝对值(例如 px)。
      • 偏移值的 计算
        • 百分比偏移: 指定 图片的相对位置 和 容器的相对位置 重合
        • x 偏移值 = (container width - image width) * (position x%)
        • y 偏移值 = (container height - image height) * (position y%)
          • 所以 当两个大小相同时,百分比值 会无效,因为偏移值 会一直 等于 0

    在这里插入图片描述

    • 长度 xpos ypos
      • 相对于: 左边缘的 x 与上边缘相比,坐标与上边缘相比 y坐标
      • 两个值: 先水平,后垂直,省略一个 是 居中 50%
        • 水平位置: xpos
          • 第一个值
        • 垂直位置: ypos
          • 第二个值
          • 左上角: 0 0
      • 单位
        • 像素 (0px 0px)
        • 其他的 CSS 单位。
    • 混合使用: 百分比,关键词 和长度
      • %position 值。

  • 属性值的 数目

    • 两个值:
      • 单背景图像 一般都是 两个值 (x,y) , 先指定水平位置,再指定垂直位置.,指定方向 一个值就够了,所以 top topleft left 是无效的.
    • 一个值:
      • 只有一个值,第二个值 默认是 居中
  • 属性值的 分隔

    • 可以为 多个背景图像 指定 位置值,用 , 隔开。
  • 属性值的 正负: 图片 位移方向

    • 正值: 将 图片 相对容器 右移和下移 (右下)
    • 负值: 将 图片 相对容器 左移和上移 (左上)

  • 背景图像位置 浏览器支持

在这里插入图片描述


  • 示例1: 背景图像的位置 只写一个属性值来指定 位于中上方.
.bgimg-fixed {      background-color: #c0c0c0;     background-image: url("../images/star.png");     background-repeat: no-repeat;     /*top = center top */     background-position: top;  }

在这里插入图片描述

  • 只指定 方向值
    • 另一个方向的值 默认是 居中.
      • top = cente top
      • left = left center

  • 示例2: 只 默认指定百分比值 默认水平方向,另一个垂直方向 居中 50%
    • 10% = 10% 50%
.bgimg-fixed {      background-color: #c0c0c0;     background-image: url("../images/star.png");     background-repeat: no-repeat;     /*10% = 10% 50% */     background-position: 10%;  }

在这里插入图片描述


  • 示例3: 同时指定 例如,两个方向的位置, 右下方.
.bgimg-fixed {      background-color: #c0c0c0;     background-image: url("../images/star.png");     background-repeat: no-repeat;     /*关键字 不分顺序*/     background-position: right bottom;  }

在这里插入图片描述

  • 关键词的位置名,不分顺序
    • 因为从名字上可以看出 水平方向 或垂直方向.

  • 示例4: 同时指定 关键字位置名 指出长度值/百分比值, 距离 上下左右边缘 的距离.
    • 距离右边缘 10px,距离下边缘60px
      • background-position: right 10px bottom 60px;
        • 长度值 换成 百分比值,同样有效,也是指定的 距离值.
      • 关键字后面 不指定 默认为距离值 靠近边缘.
        • 也可以 只为一个方向 指定距离值 right 10px bottom,这样也合法.
.bgimg-fixed {      background-color: #c0c0c0;     background-image: url("../images/star.png");     background-repeat: no-repeat;     /*关键字 不分顺序,距离右边缘 10px,距离 下边缘60px */     background-position: right 10px bottom 60px;  }

在这里插入图片描述

  • 更多距离值 分析图: 一个位置的 多种写法
    • top 75px left 100x = left 100px top 75px
      • (可以调换 关键字位置名 顺序和距离值应保持在 位置名后方)
    • bottom left 25% = top 100% 25%
      • bottom = top 100%
      • left 25% = 25%
    • right = right center = left 100% center = left 100% top 50%
      • right = left 100%
      • 垂直 center = top 50% = bottom 50%

在这里插入图片描述


  • 示例5: 同时指定 两个背景图像 位置 和 重复方式
.bgimg-fixed {      background-color: #c0c0c0;     background-image: url("../images/star.png"),url("../images/四叶草背景.png");     background-repeat: no-repeat,no-repeat;     background-position: right bottom 100px,left 10px bottom 30px;  }

在这里插入图片描述


  • 示例6: 设置 背景图像位置 负值
    • 负值: 图像 向 相反方向 位移.
.bgimg-fixed {      background-color: #c0c0c0;     background-image: url("../images/star.png"),url("../images/四叶草背景.png");     background-repeat: no-repeat,no-repeat;     background-position: right bottom -30px,left -30px bottom -30px;  }

在这里插入图片描述


6. background-repeat 属性 : 背景图像的 重复方式 (单值,双值,超出部分 裁剪)

  • 背景图像的 重复方式
    • 设置 是否及如何 重复 背景图像
      • background-repeat 属性
        • 定义 背景图像的 重复模式。背景图像可以沿着 水平轴,垂直轴,两个轴 重复,或者 根本不重复。
        • 重复图像的 裁剪: 默认情况下,重复图像 被剪裁为 但它们可以缩放元素的大小 (使用 round) 或均匀分布 (使用 space).
      • 重复背景图像 属性
        • 实际上,针对 背景图像

  • 重复背景图像 语法
    • background-repeat: repeat|repeat-x|repeat-y|no-repeat|inherit;
/* 单值语法 */ background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat;  /* 双值语法: 水平 horizontal | 垂直vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; background-repeat: no-repeat round;  background-repeat: inherit;
  • 单值语法 = 双值语法的 简写:
    • 两个值: 先水平(第一值),再垂直 (二)
单值等价的双值
repeat-x= repeat no-repeat
repeat-y= no-repeat repeat
repeat= repeat repeat
space= space space
round= round round
no-repeat= no-repeat no-repeat
  • 标准语法
    • <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
    • 属性值的 搭配使用:
      • 除了 repeat-x | repeat-y, 其他的 可以在背景图像中使用 双值语法中 搭配使用.

  • 重复背景图像 属性值
    • 关键点:双向重复(默认) 水平重复 垂直重复 不重复 继承

    • 双向重复 (默认值): repeat

      • 背景图像 将在 垂直方向 和 水平方向 都重复。
        • 图像会 按需重复 来 覆盖 整个背景图片 所在的区域.
        • 不合适 会被裁剪: 最后一个图像, 假如它的大小 如果不合适, 会被裁剪.

          • 最右边的 裁剪后,底部漏出的一点也可以看到 是被裁剪的.

      在这里插入图片描述

      在这里插入图片描述

    • 水平重复: repeat-x

      • 背景图像将 在 水平方向 重复。
      • 不合适 会被裁剪: 最后一个图像, 假如它的大小 如果不合适, 会被裁剪.
        • 可以看到 在右边,图像被切割.

      在这里插入图片描述

    • 垂直重复: repeat-y

      • 背景图像将 在 垂直方向 重复。
      • 不合适 会被裁剪: 最后一个图像, 假如它的大小 如果不合适, 会被裁剪.
        • 可见下边缘, 图像被切割

      在这里插入图片描述

    • 不重复: no-repeat

      • 不会重复背景图像, 只显示一次。
      • 会被裁剪: 背景图像本身的大小 太大,超过元素的边框会被切割.
      • 没有重复的背景图像 的位置: 是由 background-position 属性来决定.

      在这里插入图片描述

    • 图像的重复部分 不会被裁剪: space

      • 图像会 尽可能 得重复, 但是 不会裁剪.

      • ? 重复的图像 不会被裁剪: 超出重复图像 元素边框会去除超出部分,放大其余部分 来填充 (不会重复剪裁)

        • 固定在 元素边缘上: 第一个 和 最后一个图像 元素会固定 相应的边缘,
        • 空白的 均匀分布: 同时 空白分布均匀 在图像之间.

      在这里插入图片描述

      • ? 背景图像本身的大小 超过元素大小: 背景原图像 它本身的大小超过了元素 边框,然后切割.

      在这里插入图片描述

      • space值 排斥的属性:

        • background-position 图像定位属性 会被忽视,
    • 压缩显示 图像(不裁剪): round

      • 图像的 伸展和压缩:
        • 随着 元素的大小 的增长, 重复图像 伸展(无缝隙), 直到有足够的空间 添加图像时, 添加新图像, 压缩其他图像以显示新图像.
      • 不裁剪: 伸展和压缩 ,显示完整的图像,不切割 图像.
      • 添加图像 和 图像压缩: 下一个图像 被添加后, 所有当前图像 它将被压缩以腾出空间.
        • 本来放不下 两个 完整的图像(背景图像 本身比较大),浏览器, 压缩图像后 ,就能放下 两个完整的图像.

      在这里插入图片描述

      • 添加图像: 留白 >= 图像宽度的一半 , 添加 另一个图像。
    • 继承 父亲: inherit

      • 从父元素 继承 background-repeat 属性的 设置。

  • 重复背景图像 background-repeat 属性值和属性值 浏览器支持

在这里插入图片描述


示例1: 设置背景图像 round spaceround = round round的区别

#lizard{  /*background-image: url("../images/lizard.png");*/  background-image: url("../images/四叶草背景.png");  background-repeat:round space; }
  • 默认背景显示 = 双向重复repeat

    • 可以看到 右下边缘 都有被裁剪

在这里插入图片描述

  • 值为: round space

    • 水平方向: 压缩图像 显示完整的图像
    • 垂直方向: 超过不切割的部分 去掉,拉伸剩余图像,均匀分布空白.
    • 可以看到 当背景重复时,水平和垂直方向, 没有被切割的部分.

在这里插入图片描述

  • 值为: round = round round

    • 可以看到 垂直背景, 比上面的space值 多了一行图像.
      • 因为round 值 通过压缩其余的图像,多显示了一行,而不只是 去掉 切割图像的部分.
      • 裁剪的区别: space 会因为 背景图像本身的大小 超过元素大小时(不是因为 图像重复),切割, 但round 一直 不会被裁剪,因为会被裁剪,因为会 显示压缩图像.

在这里插入图片描述


7. CSS3 background-clip 属性: 背景色/图像 的 绘制/裁剪 区域 (背景 显示区域)

  • 背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/背景剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/背景剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切区/剪切/剪切/剪切/剪切区/ 绘制区域
    • 设置背景的 绘制区域 / 切割区域的背景
      • 背景 显示区域: 显示 向用户展示的区域和其他部分 就算有背景 ,剪掉了,也看不见.
        • background-clip 属性
          • 背景裁剪 属性
      • 没有 设置背景 (即 没有设置 背景图像 background-image或背景颜色 background-color)
        • 视觉效果: 则 背景裁剪区域 background-clip 仅在边框 具有 透明区域 或 部分不透明区域 (根据 边框样式 border-style 或边框图像 border-image)时 才具有 视觉效果;
        • 否则,边框 掩盖差异。

  • 切割/绘制背景 语法
    • background-clip:border-box|padding-box|content-box;
/* 关键字值 Keyword values */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text;  /* Global values */ background-clip: inherit; background-clip: initial; background-clip: unset;

  • 背景裁剪的 属性值

    • 关键点:边框盒 内边距框 内容框 文字

    • 边框盒(默认): border-box

      • 背景被剪掉了 边框盒。
        • 背景 延伸到 框架的外边缘 (但在z顺序中 是在 边框下)。
        • 边框显示 在背景上方: 如果 边框是 下面会有虚线和背景 透出来.
      • 包括: 边框
    • 内边距框: padding-box

      • 背景 被裁剪到 内边距框。
        • 背景 延伸到 内外边缘。
      • 不包括: 边框
        • 边框的下面 没有背景。
    • 内容框 : content-box

      • 背景 被裁剪到 内容框。
        • 背景是在 内容框内 绘制的。
      • 不包括: 边框 和 内边距
    • 文字: text (尚在 实验中的属性)

      • 背景 是在 前景文本(foreground text)中 绘制的。
        • 把背景 显示文本的颜色.
      • 使用前提:
        • ? 需要 浏览器前缀
        • ? 文本装饰或阴影 不包括在 裁剪区域中
        • ? 文字的颜色: 必须设置成 color:transparent 透明色
          • 这样 在文字中, 显示出 背景色/图像背后,否则会被录用 文字原本的颜色 遮挡住 背景色/图像.

  • 盒子模型 分界图
    • 从内到外的 顺序: 内容区 > 内边距区 > 边框区 > 外边距区

在这里插入图片描述


  • 背景色/图像 裁剪/绘制 区域的 浏览器支持
    • IE 9 开始支持, IE 8 以及更早的版本 不支持 background-clip 属性。
    • 黄色: 需要 浏览器前缀
    • 低版浏览器 浏览器也需要支持,这是一个相对较新的属性.

在这里插入图片描述


  • 示例1: 把背景的 切割/绘制区域 分别设置为 到框架外边缘, 内外边缘, 内容区,文本内部

  • html

    <p id="clipTest">天道酬勤, 是汉语成语,读 tiān dào chóu qín。意思是 上天会按照 每个人的勤奋,给予相应的奖励。多耕耘,多收获,只要你付出 如果你有足够的努力,你将来一定会 获得相应的收获。《周易》中的卦辞。</p>
  • css
#clipTest{  /*设置元素的 外边距 边框 内边距 字体大小/颜色/厚度*/  margin: 20px;  border: 10px dashed #000;  padding: 20px;  font-size: 1.2em;  font-weight: bold;  color: #fff;   /*设置 背景图像 和 背景颜色(作为背景图像的回归)*/  background-color: #c0c0c0;  background-image: url("../images/hand.jpg");   /*设置背景的 绘制/裁剪 区域*/      /*到 边框区的 外边缘*/  background-clip: border-box;   }
  • 到 边框的 外边缘 : border-box
    • 可以看到 显示在 边框下面,因为边框是虚线,可以看到 部分泄漏的背景图 background-image.
      • 插入图片描述
    • 对背景色 background-color,也是有效的.
      • 在这里插入图片描述

  • 到 内边距区的 外边缘: background-clip:padding-box
    • 背景色 和背景图像 不包括 边框区的位置
 /*到 内边距区的 外边缘*/  -webkit-background-clip: padding-box;  -moz-background-clip: padding-box;  background-clip: padding-box;

在这里插入图片描述


  • 到 内容区外边缘 : content-box
    • 背景色 和 不包括背景图像 边框与内边距区
    • 在这里插入图片描述

  • 在 文字的内部: text
    • 注意: 此时,文本的颜色 color#fff 必须设置白色 color:transparent 只有透明,才能在文字中, 背景色显示.
      • 否则,背景色/图像将被文本的原始颜色使用 遮挡住.
    • 在这里插入图片描述

8. CSS3 background-origin 属性: 背景图像的 相对区域的原点 (对 背景色 无效,搭配 background-position )

  • 背景图像的 相对区域的原点:
    • 用于: 设置 背景图像的起源: 相对于 边框区,内边距区 或 内容区 开始。
      • 设置 背景图像 出现在 哪个区域
        • background-origin 属性
          • 美 ['?r?d??n]
        • 背景图像原点 属性
    • 搭配属性:
      • 位置: 当设置 背景图像的 位置 background-position 属性,指定是 相对于 什么区域 来定位的。
      • ★ 用于 背景图像不重复: 设置 background-repeat:no-repeat 不重复,重新设置 图像原点,看起来 才比较明显
        • 否则 默认图像,会 双向重复,把 边框区,内边距区 等等,看不到相对位置.

  • 不能用于 背景图像固定
    • 背景图像 为固定的 : background-attachment:fixed,则 背景图像原点background-origin 属性 没有效果。
      • 因为 固定背景图像, 是相对于 浏览器窗口 不动,给它指定 区域不会移动,所以 不会有效果.
      • 所以,要留意 属性之间的影响.

  • 背景图像原点 语法
    • background-origin: padding-box|border-box|content-box;
/* 关键字值 Keyword values */ background-origin: border-box; background-origin: padding-box; background-origin: content-box;  /* Global values */ background-origin: inherit; background-origin: initial; background-origin: unset;

  • 背景图像原点 属性值
    • 边框区:border-box
      • 背景图像 相对于 边框区 来定位。
    • 内边距区(默认值): padding-box
      • 背景图像 相对于 内边距区 来定位。
    • 内容区: content-box
      • 背景图像 相对于 内容区 来定位。
    • 多值: 同时设置 多个背景图像 的 当原点相对于区域时,多个属性值之间 ,用 逗号, 分隔.
      • background-origin: content-box, padding-box;

  • 盒子模型 分界图
    • 从内到外的 顺序: 内容区 > 内边距区 > 边框区 > 外边距区
    • 在这里插入图片描述

  • 背景图像原点 background-origin的 浏览器支持
    • 需要使用要使用 浏览器前缀

在这里插入图片描述


  • 示例1: 背景图像的起源 分别设置为 相对于 边框区、内边距区、内容区
#clipTest{  /*设置元素的 外边距 边框 内边距 字体大小/颜色/厚度*/  margin: 20px;  border: 10px dashed #000;  padding: 20px;  font-size: 1.2em;  font-weight: bold;  /*color: transparent;*/  color: #fff;   /*设置 背景图像 和 背景颜色(作为背景图像的回归) 为了看到原点位置,先注释掉)*/  /*background-color: #c0c0c0;*/  background-image: url("../images/hand.jpg");  background-repeat: no-repeat;    /*背景图像的起源 相对位置*/   -webkit-background-origin: border-box;  -moz-background-origin: border-box;  background-origin: border-box; }
  • 背景图像原点: 相对于 边框区 border-box
    • 可以看到 虚线边框下方有泄漏 背景图像
    • 在这里插入图片描述

  • 背景图像原点: 相对于 内边距区 padding-box
    • 可以看到 边框的下方 已经不显示 背景图像了
    • 在这里插入图片描述

  • 背景图像原点: 相对于 内容区 content-box
    • 只显示背景图像 图像不显示在内容区、边框和内边距部分
    • 在这里插入图片描述

  • 示例2: 指定 背景图像的 原点相对区域,然后设置 背景的位置
    • 背景图像的起源 相对于 内容区,向右和向下 移动10px
 -webkit-background-origin: content-box;  -moz-background-origin:content-box;  background-origin: content-box;      /*背景图像的位置*/  background-position:  10px 10px;

在这里插入图片描述


9. CSS3 background-size 属性: 背景图像的 大小 (可定义 宽高)

  • 背景图像的 大小:
    • 设置 背景图片大小。图片可以 保有其 原尺寸,或 拉伸到 新尺寸,或 在保持 同时,它的原始比例 , 缩放到 元素的 可用空间的大小。
      • background-size 属性
        • 背景图像大小 属性
    • 背景颜色 和 背景图像:
      • 没有 被背景图片 背景区 , 它仍然会显示 background-color 属性设置的 背景颜色。
      • 此外,如果 背景图片 设置了 透明或者 半透明属性,背景图片 背景色 透明区过透明区域 显示出来。

  • 背景图像大小 语法
    • background-size: length|percentage % |cover|contain;
/* 关键字 */ background-size: cover background-size: contain  /* 一个值: 指定图片的宽度,图片的高度是隐式的auto */ background-size: 50% background-size: 3em background-size: 12px background-size: auto  /* 两个值 */ /* 指定图片的宽度,第二个值指定图片的高度 */ background-size: 50% auto background-size: 3em 25% background-size: auto 6px background-size: auto auto  /* 逗号分隔的多个值:设置多个背景 */ background-size: auto, auto     /* 不同于background-size: auto auto */ background-size: 50%, 25%, 25% background-size: 6px, auto, contain  /* 全局属性 */ background-size: inherit; background-size: initial; background-size: unset;

  • 背景图像大小 属性值
    • 宽高 长度值: 宽 x 高

      • 设置背景图像 高度和宽度。
        • 不允许 有负值。
      • 宽 X 高
        • 第一个值: 设置 宽度
        • 第二个值: 设置 高度。
      • 一个值:
        • 这个值指定 图片的宽度、高度 隐式的为 auto
    • 宽高 百分比值: width% height%

      • 父元素的 百分比 来设置 背景图像的 宽度和高度。
        • 不允许 有负值。
      • percentage %
      • 宽 X 高
        • 第一个值: 设置 宽度
        • 第二个值: 设置 高度。
      • 一个值:
        • 这个值指定 图片的宽度、高度 隐式的为 auto
        • 指定 背景图片 相对背景区 的百分比
          • 背景区: 由 背景图像 相对区域的原点 background-origin设置
            • 默认背景区: 盒模型的 内容区与内边距,也可设置为 只有内容区,或者 还包括边框。
            • 如果是固定的背景图像 background-attachmentfixed,背景区 为 浏览器可视区(即 不包括视窗) 滚动条。不能为负值。
    • 裁剪式 完全覆盖 背景区 : cover

      • 图像伸展: 把背景图像 伸展到足够大, 使背景图像 完全覆盖 背景区域。
        • 不改变 图片比例: 保持 图像的宽高比例(图像 不会被压扁)。
        • 该 背景图 以它的 全部 宽或者高 覆盖容器。
      • 图片 可能会裁剪: 背景图像的 某些部分, 也许 无法显示 在背景定位区。
        • 当 容器元素 和 背景图大小 背景图不同 左/右 或者 上/下 部分将被切割。
    • 不裁剪式 完全覆盖 背景区: contain

      • 把 背景图像 伸展到最大尺寸, 使其宽度和高度 完全适应 背景区域。
        • 不裁剪,不改变 图片比例: 在 不裁剪 或 拉伸 在图像的情况下,像 缩放到 尽可能大的范围。
    • 按图片比例 自动缩放:auto

      • 以 背景图片的比例 缩放背景图片。
    • ▲ 多个值: 若要指定 请使用多个背景图像的大小 逗号,分隔 每个背景图像的值。

      • 同时设置 3个 背景图像的大小: background-size: 50% 25%, contain, 3em;

  • 固有尺寸(宽高) 与 固有比例(宽高比)
    • ① 位图: 位图图像(如.JPG) 总是具有 固有的 尺寸和比例。
    • ② 矢量图: 可能两者 都有,也有可能 只有一个。
      • 矢量图像(如SVG)不一定 固有尺寸。
        • 如果它有 固有和垂直固有尺寸: 它也有 固有比例
        • 如果它 没有尺寸 或者只有 一个尺寸: 它可能有 也可能 没有比例.
    • ③ 渐变: 没有 固有尺寸和比例。
    • element()函数: 使用element()函数 背景图像 使用 生成元素的 固有尺寸和比例。

  • 背景图片的 大小计算:
    • 计算数值: 取决于 图像的固有尺寸(宽度和高度) 和 固有比例 (宽高比)
      • 指定了 宽高:
        • 如果指定了 background-size 的两个值 并且不是auto
        • 背景图片 按 指定大小 渲染
      • containcover
        • 保留 固有比例,最大的 包含或 覆盖 背景区
        • 如果 图像 如果没有固有比例,则按 背景区大小
      • autoauto auto
        • 有宽高: 如果图像 同时具有 水平和垂直 固有尺寸,则按 大小呈现。
          • 按这个尺寸
        • 没有固有尺寸 与 固有比例
          • 则按 背景区的大小
        • 没有 固有尺寸, 但是 有固有比例
          • 效果同 contain,不切割,按比例显示.
        • 只有固定尺寸 与 比例
          • 则 由此尺寸 与 比例 计算大小
        • 只有固定尺寸 但是 没有比例
          • 它使用 指定的尺寸 另一个尺寸和背景定位区 进行渲染。
    • 一个为 auto ,另一个不是 auto
      • 图像 有固有比例
        • 指定的长度
          • 使用 指定值
        • 未指定长度
          • 按比例缩放: 由 指定值与固有比例 计算。
      • 图像 没有固有比例
        • 指定的长度
          • 使用 指定值
        • 未指定长度
          • 使用 图像 如果没有相应的固有长度, 固有长度,则使用 背景区 相应的长度
  • 注意: 对于 没有固有尺寸 或 矢量图固有比例 , 并非所有浏览器 都支持。
    • 特别注意测试 Firefox 7-Firefox 8 ,确定差异 能否接受。

  • 背景图像大小 background-size 的 浏览器支持


在这里插入图片描述

  • 需要使用的 浏览器前缀
  background-image: url(bg-image.png);    -webkit-background-size: 100% 100%;           /* Safari 3.0 */      -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */        -o-background-size: 100% 100%;           /* Opera 9.5 */           background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

  • 示例1: 如果您使用 渐变<gradient>作为背景 并指定了 背景尺寸background-size

    • 渐变图像 要明确指定 宽高:
      • 最好不要指定 只使用 单个auto值,或者 只使用宽度值 指定(例如,background-size: 50%)。
      • 因为,在这种情况下,渲染 渐变值<gradient>s在 Firefox 8 目前,不同浏览器之间发生了变化 通常是不一致的
        • 并不是 所有浏览器, 都完全按照 CSS3 的 background-size 规范 和 CSS3 的 Image Values gradient 规范 实现渲染。
  • 安全值 示例

.gradient-example {   width: 50px;   height: 100px;   background-image: linear-gradient(blue, red);    /* 不能安全使用 值形式 Not safe to use */   background-size: 25px;   background-size: 50%;   background-size: auto 50px;   background-size: auto 50%;    /* 可安全使用 值形式 Safe to use */   background-size: 25px 50px;   background-size: 50% 50%;   }
  • 实例 css
#lizard {     border: 10px dashed #000;     /*用渐变 做背景图像*/     background-image: linear-gradient(yellow,green);     background-color: #c0c0c0;     background-repeat: no-repeat;      /*背景图像的大小*/     background-size: 300px 100px; }
  • 300px,高100px
    • 在这里插入图片描述

#lizard {     border: 10px dashed #000;     padding: 10px;     background-image: url("../images/lizard.png");     background-color: #c0c0c0;     background-repeat: no-repeat;      /*背景图像的大小*/     /*background-size: 200px;*/ }
  • 示例2: 分别设置 不同值的 背景图像大小
  • 不设置 背景图像的 默认显示(图像不重复)
  • 在这里插入图片描述
只设置 宽度值: background-size: 200px;(按比例缩放)宽高一起设置: background-size: 200px 100px;(比例可以根据指定值改变)
裁剪式 完全覆盖: background-size: cover;(按比例缩放)不裁剪式 安全覆盖: background-size: contain;(按比例缩放)

(学习视频分享:web前端入门)

以上是手把手带给你的。CSS 背景属性(Background)详情请多关注。php中文网其他相关文章!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。2022-08-06 03:00:39

猜你喜欢

最新文章