首页 > 其他分享 >css滤镜基本用法

css滤镜基本用法

时间:2023-06-20 09:11:16浏览次数:60  
标签:函数 模糊 用法 filter 滤镜 图像 blur css

CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜,滤镜通常用于调整图像,背景和边框的渲染。
它的值可以为 filter 函数 <filter-function> 或使用 url 添加的svg滤镜。

filter: <filter-function> [<filter-function>]* | none
filter: url(file.svg#filter-element-id)

<filter-function> 可以用于 filter 和 backdrop-filter 属性。

它的数据类型由下列过滤器函数之一指定。

每个函数需要一个参数,如果参数无效,则滤镜不会生效。以下是对滤镜函数含义的解释:

blur():模糊图像
brightness() :让图像更明亮或更暗淡
contrast():增加或减少图像的对比度
drop-shadow():在图像后方应用投影
grayscale():将图像转为灰度图
hue-rotate():改变图像的整体色调
invert():反转图像颜色
opacity():改变图像透明度
saturate():超饱和或去饱和输入的图像
sepia():将图像转为棕褐色

常见应用

1. 图像变黑变亮

滤镜中的brightness用于调整图像的明暗度。默认值是1;

小于1时图像变暗,为0时显示为全黑图像

大于1时图像显示比原图更明亮

原来的图片会偏暗一些,加了滤镜之后,整体色彩就更鲜明了

2. 图像变灰色

filter: grayscale(100%);

3. 图像模糊

filter: blur 对元素自身产生模糊效果

backdrop-filter: blur 对元素后面区域添加模糊效果


更多漂亮的滤镜效果,可参考: 巧用CSS filter,让你的网站更加酷炫 

 

 

参考:https://juejin.cn/post/7221366548076871737

标签:函数,模糊,用法,filter,滤镜,图像,blur,css
From: https://www.cnblogs.com/mengff/p/17492735.html

相关文章

  • Taro项目引入Tailwindcss
    前情TailwindCSS是一个原子类CSS框架,它将基础的CSS全部拆分为原子级别,同时还补全各种浏览器模式前缀,兼容性也不错。它的工作原理是扫描所有HTML文件、JavaScript组件以及任何模板中的CSS类名,然后生成相应的样式代码并写入到一个静态CSS文件中。TailwindCSS快速、......
  • 用 SmartEdit 打开 SAP Commerce Cloud Storefront 时动态在 body 标签注入的 css cla
    当我们使用SAPSmartEdit打开SAPCommerceCloudStorefront时,在商户网站中,还必须在body标签中作为CSS类名包含以下唯一标识符:smartedit-page-uid-:指定指定目录和目录版本的唯一页面标识符。这是为了支持旧版实现而必需的。smartedit-page-uuid-:指定页面的全局唯一标识符(UU......
  • Spartacus 项目中 scss 文件里的 mergeAll 函数
    在SCSS文件中,并没有内置的mergeAll()函数。mergeAll()函数是一个JavaScript/TypeScript中的数组操作方法,用于将多个数组合并为一个数组。它不是SCSS或Sass的特定功能。然而,SCSS和Sass提供了一些强大的功能来处理样式和样式表。这些功能包括嵌套规则、变量、混合......
  • css breakages 的概念介绍
    在前端开发中,CSS(层叠样式表)用于控制网页的样式和布局。如果在CSS代码中存在错误或不当的使用,可能会导致页面显示出不正确的样式或布局,这被称为CSSbreakages(CSS破坏)。CSSbreakages可以有多种形式,例如:语法错误:CSS代码中存在拼写错误、缺少或多余的符号、不正确的选择器或属性等......
  • Vue3中computed的用法
    Vue3中computed的用法computed又被称作计算属性,用于动态的根据某个值或某些值的变化,来产生对应的变化,computed具有缓存性,当无关值变化时,不会引起computed声明值的变化。产生一个新的变量并挂载到vue实例上去。一、computed简写形式<template><div><div>姓:<inputtype="te......
  • Oracle列转行函数LISTAGG() WITHIN GROUP ()用法
    1:SELECTID,SIDFROMTestWHERE ID='001' 2:SELECTID,LISTAGG(SID,',')WITHINGROUP(ORDERBYSID)ASSID_LISTFROMTestWHERE ID='001'groupbyID  ......
  • 【实例】深入详解 CSS 中的 object-fit 5个属性值
    【实例】深入详解CSS中的object-fit5个属性值在本文中,我们将介绍如何使用object-fit,以及一些实际用例和建议。我们并不总是能够为HTML元素加载不同大小的图像,如果我们使用与图像纵横比不成比例的宽度和高度,则图像可能会被压缩或拉伸。为解决此问题,我们可以为img元素使用ob......
  • Android进阶宝典 -- JetPack Navigation的高级用法(解决路由跳转新建Fragment页面问题)
    相信有相当一部分的伙伴,在项目开发中依然使用Activity作为页面承载体,有10个页面就会有10个Activity,这种方式当然没问题,但是如果涉及到页面间数据共享,那么使用多Activity就不是很方便了,需要Activity传递各种数据,涉及到数据的序列化与反序列化;因此产生了单Activity和多Fragment架构,所......
  • (七)CSS动画与响应式
    一、CSS动画 二、响应式 ......
  • (一)CSS样式、CSS选择器、伪元素、CSS背景
    一、CSS样式二、CSS选择器 三、伪元素四、背景  ......