• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <image>

    CSS的<image>数据类型描述的是2D图形。在CSS中有两种类型的图像:简单的静态图像,经常被一个在使用的URL引用,动态生成的图像,比如DOM树的部分元素样式渐变或者计算样式产生。

    CSS可以处理以下情形中的不同类型图像:

    • 具有固有尺寸(大小)的图像,即图像具有自己的原始尺寸(大小),比如一个jpeg格式的图像有他自己的固有尺寸(大小);
    • 图像具有多个固定尺寸,可在一个文件中存在多个不同版本的尺寸,比如有些.ico格式的图像。在这种情况下,图像表现出来的固有尺寸将是这些尺寸较大的一个,也就是最接近外层包含它的容器纵横比的那个图像;
    • 没有固定大小但有固定纵横比的图像,像一些矢量图形,比如SVG格式的图像;
    • 没有固定大小也没有固定宽高比的图像,比如CSS渐变(图像);

    CSS确定一个图像对象实际尺寸的依据有三条:(1)图像的原始尺寸;(2)用CSS属性指定的宽和高,比如width,height or background-size中,(3)图像对象默认大小,由图像使用用途的属性类型决定:

    图像对象类型默认的图像对象尺寸
    background-imageDOM元素的背景定位的范围尺寸(大小)
    list-style-image字符的1em尺寸(大小)
    border-imageDOM元素的边框图像范围尺寸(大小)
    cursor浏览器定义的光标尺寸匹配在使用操作系统上常规的光标尺寸
    用 CSS content属性,和CSS伪元素::after::before替换元素内容一个 300px × 150px 矩形

    图像对象的实际尺寸计算算法如下:

    • 如果宽度和高度都被指定了,则使用这些值会作为图像对象实际尺寸;
    • 如果指定了宽度和高度中的一个,恰好这个值匹配上了图像固有宽高比中的一个值,则另一个会使用固有宽高比来确定,否则就使用图像的原始大小来确定没定义的那个值;
    • 如果宽度和高度都没有被指定,在不超过图像对象默认尺寸的前提下,将会根据图像的固有宽高比来计算图像对象的实际尺寸;如果图像没有固有宽高比,则会采用图像对象固有宽高比;如果图像对象也没有固有宽高比,则使用图像对象的默认大小(翻译可能会有误,求大神快来翻译);

    图像可以使用很多CSS属性,比如background-image,border-image,content,list-style-imagecursor

    提示:不是所有的浏览器都支持任何类型的图像的任何属性,详情查看浏览器兼容性了全面的条目列表

    示例

    以下是有效的图像引用值:

    url(test.jpg)                          //url()方法, 只要test.jpg是图像文件
    linear-gradient(to bottom, blue, red)  //一个 <gradient>标签
    element(#colonne3)                     //页面的一部分, 使用了element()方法,如果 colonne3 是存在于页面中的一个元素id即可
    

    以下是无效的图像引用值:

    cervin.jpg                             //图像文件必须使用url()方法定义
    url(report.pdf)                       // url()方法指向的文件链接必须是一个图像文件
    element(#fakeid)                       //如果fakeid是一个不存在与页面的元素id
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持被引用为CSS <url>数据类型
    IE10以上版本的浏览器都支持CSS <gradient>(渐变)

    语法

    url()| element()| <gradient>

    取值

    一个<image> CSS数据类型可能表示成如下几种类型:

    • 一个图像被引用为CSS <url>数据类型使用url()方法。
    • 一个CSS <gradient>。
    • 页面的一个部分,定义在element()方法中。

    下篇:image()