【CSS 图像 image 数据类型】

• ⑴ 常用的 图像的 属性值
  • ① 图像路径/地址 url()方法: url('URL')
    • 指向 图像的路径,简单的 静态图像，用 URL引用
    • url值 带引号.
  • ② 渐变图像
    • gradient 相关的方法 生成的 渐变图像

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

• ⑶ 图像搭配的 CSS属性
  • background-image、border-image、content、cursor和 list-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)  
                            /* 具有不同分辨率的 图像的选择 */             

♣ 结束语 和 友情链接

• 参考文档
  • <image> - CSS: Cascading Style Sheets | MDN

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

• 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/103326075
  • 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！