热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

html代码如何让照片变模糊

在html中可以使用filter属性和blur()函数来让照片变模糊,只需要给img照片添加“filter:blur(px);”代码样式即可。filter属性用于定义图片元素的可视效果,设置值为“blur(值)”时可以给图像设置高斯模糊。

在html中可以使用filter属性和blur()函数来让照片变模糊,只需要给img照片添加“filter: blur(px);”代码样式即可。filter属性用于定义图片元素的可视效果,设置值为“blur(值)”时可以给图像设置高斯模糊。



	
		
		

	

	
		

效果图:

注意: Webkit, 以及一些其他浏览器 不支持第四个长度,如果加了也不会渲染。

  • (可选)
  • 查看 该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用colorcolor属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。
  • grayscale(%)

    将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

    hue-rotate(deg)

    给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。

    invert(%)

    反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。

    opacity(%)

    转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。

    saturate(%)

    转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。

    sepia(%)

    将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

    url()

    URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。

    例如:

    filter: url(svg-url#element-id)

    更多编程相关知识,请访问:编程视频!!

    以上就是html代码如何让照片变模糊的详细内容,更多请关注其它相关文章!


    推荐阅读
    author-avatar
    sjxs198422
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有