html代码如何让照片变模糊

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

html代码如何让照片变模糊

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在HTML中,可以使用filter 属性,设置值为“blur(px)”来让照片变模糊。

css filter 属性

filter 属性定义了元素(通常是html代码如何让照片变模糊)的可视效果(例如:模糊与饱和度)。

立即学习“前端免费学习笔记(深入)”;

blur(px) :给图像设置高斯模糊。”radius”一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。    

示例:

nbsp;html>body,html {margin: 0;padding: 0;width: 100%;height: 100%;}.container {padding: 20px;position: relative;overflow: hidden;}img {height: 200px;transition: .5s ease-in-out;}.container div {width: 300px;overflow: hidden;float: left;margin-left: 40px;}.blur img {filter: blur(15px);-webkit-filter: blur(15px);}.blur img:hover {filter: blur(0);-webkit-filter: blur(0);}
@@##@@

登录后复制

效果图:

html代码如何让照片变模糊

【推荐教程:CSS视频教程 】

Filter 函数 

注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。

Filter 描述

none默认值,没有效果。blur(px)给图像设置高斯模糊。”radius”一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;

如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。brightness(%)给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。contrast(%)调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。drop-shadow(h-shadow v-shadow blur spread color)

给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值,除了”inset”关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。参数如下:

(必须)这是设置阴影偏移量的两个 值.  设定水平方向距离. 负值会使阴影出现在元素左边. 设定垂直距离.负值会使阴影出现在元素上方。查看可能的单位.
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了  and/or ,会有模糊效果). (可选)这是第三个code>值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值 若未设定,默认是0 (则阴影的边界很锐利). (可选)这是第四个 值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小). 
注意: 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滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。

例如:

@@######@@

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

1.gif

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

登录后复制

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2953917.html

(0)
上一篇 2025年3月12日 00:03:48
下一篇 2025年3月8日 09:54:01

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 在html中怎么设置文字间距

    在html中,可以使用letter-spacing属性设置文字间距,该属性可以增加或减少字符间的空白(字符间距),只需要给包含文字的元素添加“letter-spacing:间距值;”样式即可。 本教程操作环境:windows7系统、CSS3…

    2025年3月12日
    200
  • html怎么设置button大小及颜色

    在html中,可以使用width和height属性来设置button元素的大小,使用background-color属性来设置button元素的颜色,具体语法为“button{width:宽度值;height:高度值;background-…

    2025年3月12日
    200
  • html怎么设置文本域的大小

    在html中,可以使用width属性和height属性来设置文本域的大小,只需要给文本域标签textarea添加“width:宽度值;height:高度值;”样式即可。 本教程操作环境:windows7系统、CSS3&&HT…

    2025年3月12日
    200
  • html怎么删除表格的第二行

    html中可以利用jquery的eq()和remove()方法来删除表格的第二行,具体方法:首先使用“$(‘table tr’)”获得表格的tr行对象,然后使用“eq(1)”指定第二行对象,最后使用remove()方…

    2025年3月12日 编程技术
    200
  • html怎么设置透明色背景

    html中设置透明色背景的方法:1、直接使用“backgroud:rgba(R,G, B, A)”设置透明色背景。2、先使用“backgroud:颜色值;”样式来设置背景色;然后使用“opacity:透明度值”样式来给背景色添加一个透明度即…

    2025年3月12日
    200
  • html div边框线怎么设置

    html div元素边框线可以使用border相关属性来设置:1、border属性同时设置上下左右边框样式;2、border-top、border-bottom、border-left和border-right属性分别设置上下左右边框样式。…

    2025年3月12日
    200
  • css多行注释怎么写

    css多行注释的方法:首先创建一个css示例文件;然后通过“/* 文本 */”语法进行多行注释即可,注释代码如“/* This is an example of a CSS multi-line comment */”。 本教程操作环境:w…

    2025年3月12日
    200
  • css导入成功但没有效果怎么办

    css导入成功但没有效果的解决办法:1、打开网页调试工具,根据显示错误进行修改;2、查看link标签的“rel=”stylesheet””是否有错,并修改即可。 本文操作环境:Windows7系统、Chrome76.…

    2025年3月12日
    200
  • css为什么加了top移动不了

    css加了top移动不了是因为“position”属性的值为“static”,那么设置“top”属性就不会产生任何效果,其解决办法就是确保“position”属性的值为“absolute”或者“relative”即可。 本文操作环境:Win…

    2025年3月12日
    200
  • css里一段字没有充满一行怎么办

    css里一段字没有充满一行的解决办法:1、给容器添加“word-break: break-all;”样式;2、给容器添加“text-align: left;”的样式。 本文操作环境:Windows7系统、css3版,DELL G3电脑 cs…

    2025年3月12日
    200

发表回复

登录后才能评论