牡丹江在线[:CSS‘躬行’记(6)——“滤镜”

admin 6个月前 (04-20) 科技 33 0

   「<滤镜>」[(filter)“可”革新元{素}的视觉出“现”,CSS内置的 「<滤镜>」[有10‘种’,{【通过】}SVG文件还能自定义 「<滤镜>」[。

【一】、调色 「<滤镜>」[

  调色 「<滤镜>」[可控制元{素}的〖 模糊[〗、『颜色』、(亮“『度』”等转变),而且多个 「<滤镜>」[可“组合”在【一】起使用。这些 「<滤镜>」[大部门既能吸【收百分数】,{也}能吸收数值。〖当传入的值〗大于上限值‘《‘时’》’,「会《以》上限」值来处置。

1)〖 模糊[〗

  blur() 「<滤镜>」[会对元{素}举行高斯〖 模糊[〗的处置,它能吸收【一】个〖 模糊[〗半径『的长』“『度』”值。““注重””,《不能向其通报负数》。({『〖( (『在下图』中)[)〗』}),《‘(〖右侧是〗调用了)’》blur() 「<滤镜>」[《后的效》果。

div {
  filter: blur(5px);
}

2)【透明】

  opacity() 「<滤镜>」[可控制元{素}的【透明】“『度』”,{其默认值}为1“〖‘{或}’〗”100%(示意不【透明】),「最小值为」0。opacity() 「<滤镜>」[与opacity 属性类似[[,<但两者不>是互斥关系,可同‘《‘时’》’应用于同【一】个元{素},“不外”opacity〖属性会在执行〗完【所】有的 「<滤镜>」[后再起作用。({『〖( (『在下图』中)[)〗』}),《‘(〖右侧是〗调用了)’》opacity() 「<滤镜>」[《后的效》果。

div {
  filter: opacity(.5);
}

3)‘阴影’

  drop-shadow() 「<滤镜>」[可为元{素}的【透明】部门提供‘阴影’,『其取值与』text-shadow 属性类似[[,“也是”X〖轴与〗Y 轴的偏移[、〖 模糊[〗半径《以》及『颜色』。下图使用了【一】张【透明】的『五角』星图,“右侧调用了”drop-shadow() 「<滤镜>」[,‘阴影’会沿着【透明】轮廓渲‘染’。

div {
  filter: drop-shadow(5px 5px 5px #F60);
}

4)灰“『度』”

  grayscale() 「<滤镜>」[能转换元{素}的灰“『度』”,『当值』为1“〖‘{或}’〗”100%‘《‘时’》’,元{素}会转换成完全的灰“『度』”。({『〖( (『在下图』中)[)〗』}),《‘(〖右侧是〗调用了)’》grayscale() 「<滤镜>」[《后的效》果。

div {
  filter: grayscale(100%);
}

 牡丹江在线[:CSS‘躬行’记(6)——“滤镜” 第1张

5)【{褐色}】

  sepia() 「<滤镜>」[能指定元{素}【{褐色}】的《比例》,《即用》【{褐色}】为元{素}上色。『当值』为1“〖‘{或}’〗”100%‘《‘时’》’,元{素}会转换成完全的深【{褐色}】。({『〖( (『在下图』中)[)〗』}),《‘(〖右侧是〗调用了)’》sepia() 「<滤镜>」[《后的效》果。

div {
  filter: sepia(100%);
}

 牡丹江在线[:CSS‘躬行’记(6)——“滤镜” 第2张

 

6)『反转』

  invert() 「<滤镜>」[能将元{素}的『颜色』『反转』处置,《即用》255“〖‘{或}’〗”100%减去『颜色』的R、G 和[B【通道】的值。({『〖( (『在下图』中)[)〗』}),《‘(〖右侧是〗调用了)’》invert() 「<滤镜>」[《后的效》果。

div {
  filter: invert(100%);
}

 牡丹江在线[:CSS‘躬行’记(6)——“滤镜” 第3张

7)(色相旋转)

  hue-rotate() 「<滤镜>」[能吸收【一】个角“『度』”值,参照尺“『度』”色轮({如下图})旋转元{素}的整体色相。

 牡丹江在线[:CSS‘躬行’记(6)——“滤镜” 第4张

  ({『〖( (『在下图』中)[)〗』}),《‘(〖右侧是〗调用了)’》hue-rotate() 「<滤镜>」[旋转90°《后的效》果。

div {
  filter: hue-rotate(90deg);
}

 牡丹江在线[:CSS‘躬行’记(6)——“滤镜” 第5张

8)亮“『度』”

  brightness() 「<滤镜>」[能调整元{素}的明暗【水平】,【值越小】,元{素}越暗。({『〖( (『在下图』中)[)〗』}),《‘(〖右侧是〗调用了)’》brightness() 「<滤镜>」[《后的效》果。

div {
  filter: brightness(50%);
}

 牡丹江在线[:CSS‘躬行’记(6)——“滤镜” 第6张

9)对比“『度』”

  contrast() 「<滤镜>」[能调整元{素}『颜色』的对比“『度』”,对比“『度』”越低,『颜色』越靠近。({『〖( (『在下图』中)[)〗』}),《‘(〖右侧是〗调用了)’》contrast() 「<滤镜>」[《后的效》果。

div {
  filter: contrast(30%);
}

 牡丹江在线[:CSS‘躬行’记(6)——“滤镜” 第7张

10)饱 和[“『度』”

  saturate() 「<滤镜>」[能调整元{素}『颜色』的饱 和[“『度』”,饱 和[“『度』”越低,『颜色』越暗。({『〖( (『在下图』中)[)〗』}),《‘(〖右侧是〗调用了)’》saturate() 「<滤镜>」[《后的效》果。

div {
  filter: saturate(50%);
}

 牡丹江在线[:CSS‘躬行’记(6)——“滤镜” 第8张

11)“组合”

  【在声明】filter属性‘《‘时’》’,可定义多个 「<滤镜>」[函数,“用空格分开”,「如下」所示。({『〖( (『在下图』中)[)〗』}),《‘(〖右侧是〗调用了)’》多个 「<滤镜>」[《后的效》果。

div {
  filter: drop-shadow(5px 5px 5px #F60) sepia(100%) saturate(50%);
}

 牡丹江在线[:CSS‘躬行’记(6)——“滤镜” 第9张

 

『二』、SVG 「<滤镜>」[

  【所】有的CSS 「<滤镜>」[都能{【通过】}SVG 「<滤镜>」[实“现”。《以》blur(5px) 为例[,首先用【一】个名为filter.svg的文件描绘〖 模糊[〗的效果,其内容「如下」所示。

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
</svg>

  然后{【通过】}url()「函」数引用SVG文件中的 「<滤镜>」[,““注重””,『井号后面随』着的是filter元{素}的id 属性值[,效果{如下图}所示。

div {
  filter: url(./filter.svg#blur);
}

 牡丹江在线[:CSS‘躬行’记(6)——“滤镜” 第10张

  {【通过】}SVG“文件的方式就能创”造出‘种’‘种’功效的 「<滤镜>」[,《以》顺应更多的庞大场景。

,

诚信在线唯【一】官网

诚信在线唯【一】官网(“现”:〖阳光在线官网〗)“现”已开放诚信在线手机“版”、【诚信在】线电脑客户端下‘载’。 诚信在线娱乐游戏公[平、{公开}、‘公正’,『用实力赢取』信誉。

新2备用网址声明:该文看法仅代表作者自己,与本平台无关。转载请注明: 牡丹江在线[:CSS‘躬行’记(6)——“滤镜”

网友评论

  • (*)

最新评论

站点信息

  • 文章总数:714
  • 页面总数:0
  • 分类总数:8
  • 标签总数:1197
  • 评论总数:336
  • 浏览总数:11353