likes
comments
collection
share

2022年你应该需要知道的CSS新特性-图形与图像

作者站长头像
站长
· 阅读数 20

Hi~，我是一碗周，如果写的文章有幸可以得到你的青睐，万分有幸~

🍎 写在前面

前一段时间State of CSS发起了2022年的调查问卷，该文件的内容主要是CSS新特性、框架、工具库的使用情况，这里我将会用几篇文章整理一下这个问卷中涉及到的新特性。

这篇文章将介绍如下内容：

  • CSSmix-blend-mode属性
  • CSS中的滤镜效果
  • CSS conic-gradient()函数
  • CSS image-set()函数

该系列文章一共有6篇，链接如下：

🍎 mix-blend-mode属性

CSS中的这个属性用于设置图片的混合模式，MDN中是这样解释的*mix-blend-mode*属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

如下展示了mix-blend-mode属性的简单用法：

该属性的浏览器兼容效果很不错，如下：

2022年你应该需要知道的CSS新特性-图形与图像

🍏 CSS滤镜效果

CSS的滤镜效果在CSS中是一系列函数，这一系列函数统称为<filter-function>，这是一个数据类型，可以使用该类型参数的CSS属性有如下两个：

  • filter：为当前元素添加滤镜效果
  • backdrop-filter：为背景添加滤镜效果

该类型下有很多的函数，这里以blur()为例：

混合模式的浏览器兼容如下：

2022年你应该需要知道的CSS新特性-图形与图像

🍐 CSS conic-gradient()

该CSS函数创建一个由渐变组成的图像，渐变的颜色变换围绕一个中心点旋转。示例代码如下：

该函数的浏览器兼容性如下：

2022年你应该需要知道的CSS新特性-图形与图像

🍑 CSS image-set()

CSS中的image-set()函数可以根据不同设备的屏幕密度或者分辨率显示不同的背景图片或者遮罩图片，也就是background-image和mask-image。示例代码如下所示：

.box {
  background-image: image-set(
    url("small-balloons.jpg") 1x,
    url("large-balloons.jpg") 2x);
}

上面那段代码的意思是如果当前是1倍屏幕，选择第一张图片，如果是2倍及以上选择第二张图片。

如果想要了解更多内容，可以阅读

我们一起学习CSS image-set() « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)这篇张鑫旭大佬写的文章。

🍍 写在最后

如果对本篇文中对你有所帮助，可以点赞收藏评论支持一下我；如果有所疑问，欢迎私信~