css图片滤镜效果代码

CSS3实现毛玻璃(图片模糊)效果 结合CSS3毛玻璃实现微信版的发红包看完整照片效果。 可以完美的兼容移动端与PC端。 阅读详情

 代码就是:

<IMG src="图片地址" style="FILTER: alpha(opacity=40)" border=0>

      就这么简单,其中opacity=40是表示图片的透明度,值越小越透明;border=0表示图片外框线条的粗细,数值越大边框线条越粗,数值设为0表示边框隐藏。
      顺便在这里给大家说一下对图片加链接的代码,因为很多刚做博客的朋友都不知道。就像我个人档案留言本下面那张春春的图片,点击它就可以进入春春的博客。。。

<A href="链接地址" target=_blank><img src="图片地址" width=100 height=100 border=0></A>

       其中target=_blank表示链接在新窗口中打开,图片的宽width和高height的具体数值可以根据自己的实际需要进行设定!

       还有很多其他的效果,这里顺便再给大家讲一下,这些滤镜效果还可以用在对播放器的美化上

1、反色:
<IMG src="图片地址" style="FILTER: invert()" border=0>

2、浮雕效果
<IMG src="图片地址" style="filter : progid:DXImageTransform.Microsoft.Emboss(Bias=0.7) ;" border=0>

3、扭曲效果 :
<IMG src="图片地址" style="FILTER: wave(add=0,freq=3,lightstrength=50,phase=0,strength=3)" border=0>

(freq=5表示扭曲尺度,strength=5表示扭曲强度)

 

4、虚线边框效果 :
<IMG src="图片地址" style="FILTER: Gray;border-width:2;BORDER-STYLE: dotted;" border=0>

(border-width:2表示边框宽度,数值可改)

 

7、透明效果 :
<IMG src="图片地址" style="FILTER: Alpha(Opacity=80,style=2)" border=0>

(style=2表示模糊类型,style=1表示从左往右渐变模糊,2如图效果,3表示四周渐变模糊) 

      至于代码加到哪里嘛,这要看你想把图片加到哪了...
      如果想把它当作个人图片,就把代码放到个人档案里,保存,再回到主页,右键单击图片“图片另存为”,保存好后,回到个人档案,上传图片,再把个人档案里的图片代码删除就行了。。。

【前端实例代码】用HTML、CSS和JavaScript创建一个简易图片编辑器(实现图片的亮度、饱和度、灰度、颜色反转、图片旋转镜面翻转等滤镜效果) addEventListener() 方法用于向指定元素添加事件句柄。使用方法来移除 addEventListener() 方法添加的事件句柄。classList 属性返回元素的类名,作为 DOMTokenList 对象。该属性用于在元素中添加,移除及切换 CSS 类。classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它。innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。......... 阅读详情

相关推荐

基于FPGA与红外成像的眼动追踪系统设计与实现(教学向)

本文详细介绍了基于FPGA与红外成像的眼动追踪系统设计与实现。通过红外摄像头采集图像,利用FPGA进行实时图像处理和红外瞳孔追踪,结合Verilog编程实现多目标检测与瞳孔定位。该系统适用于嵌入式视觉教学,展示了硬件搭建、算法优化及实时显示的完整流程。

g5h6i7j的博客 823

CSS 透明度设置方法及常见问题解析

怎样在CSS样式中设置背景的透明度看看下面的CSS: img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ }IE9,Firefox,Chrome,Opera,和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小,使得元素更加透明。IE8和早期版本使用滤镜:...

sleepwalker_1992的专栏 2851

MIKE21桥墩模拟实战:抠网格与构筑物法对比与选型指南

本文详细对比了MIKE21软件中抠网格法与构筑物法在桥墩模拟中的应用,包括操作步骤、适用场景及优缺点分析。通过实际案例数据展示两种方法的精度与效率差异,并提供选型决策树和常见问题解决方案,帮助工程师根据项目需求选择最优模拟方法。

weixin_42656416的博客 322

css 背景色半透明 兼容各个浏览器ie6 ie8 火狐

第一种:只需要在css里面写上红色部分.content{background-color: #000000;/* other browsers */opacity: 0.4;/* this works in IE6, IE7, and IE8 */filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);/* this wo...

dgk62408的博客 193

在Matlab中开发AutoSAR模型的流程(自下而上)

前面介绍了AutoSAR软件组件开发的两种方式,其中自下向上的方式,是从模型出发,流程如下。

小胡同学的工程师学习之路 5367

AI应用安全 - Prompt注入攻击

随着大模型的爆火,各行各业都在使用大模型进行智能化改造。但是如何做一个可靠的大模型应用,就需要考虑各种安全问题。本文主要介绍一种常见的安全问题,即prompt注入攻击,并介绍一些防范手段。Prompt Injection Attack(提示注入攻击)是针对大型语言模型(LLM)的一种新兴安全威胁,攻击者通过精心构造的输入提示(prompt)来操纵模型行为,使其产生非预期输出或执行恶意操作。它主要包括两种注入方式,一是直接注入,而是间接注入。

sinat_28694519的博客 1932

图片/容器/字体 透明度【opacity:0.4; filter:alpha(opacity=40)】

1、字体透明度             #test{             background-color:#000         }         #test span{             color:#fff;             zoom:1 /*触发IE下块级元素*/             filter:alpha(opacity=50);

kungfu_panda的专栏 5381

西门子PLC实战:基于1200/1500的工业物联网MQTT通讯全解析

本文详细解析了如何在西门子S7-1200/1500系列PLC上实现工业物联网MQTT通讯。通过从硬件准备、网络配置到TIA Portal中MQTT_Client功能块的实战编程,手把手指导工程师打通车间数据桥梁,解决信息孤岛问题,实现PLC数据高效上云或设备间互联。

whisky的博客 1091

CSS 8.5 图像透明度

CSS 8.5 图像透明度     1.属性opacity/filter。opacity [o'pæsəti]不透明,filter ['fɪltə]过滤 格式: opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */ 注: IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opac

武林半侠的博客 418

056:vue+openlayers 风场快速移动效果(图文代码)

本示例的目的是介绍演示如何在vue+openlayers中使用wind插件来实现风场快速移动的效果。

大剑师兰特的GIS世界 1582

【论文硬核拆解】Ctx2Skill:让大模型自己跟自己玩,从上下文里「进化」出可复用技能

论文选择自然语言技能可解释性:技能是人类可读的 Markdown 文件,可以审查、编辑、调试可迁移性:即插即用,从一个模型到另一个模型无需参数访问:对闭源模型友好这比 SKILL0/SkillRL 等参数内化方法更实用,尤其是在商业 API 场景。

步子哥的博客 155

图片/容器/字体 透明度[opacity:0.4; filter:alpha(opacity=40)]

1、字体透明度 <html><head> <style> #test{ } #test span{ color:#fff; zoom:1 /*触发IE下块级元素*/ filter:alpha(opacity=50);...

weixin_30354675的博客 389

图形推理2-四大类六提示

图形推理笔记2

小y的学习笔记 6745

CSS滤镜让图片变模糊(毛玻璃效果)实现代码

CSS代码: .blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); ...

dieshi3888的博客 209

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

CSS滤镜实现鼠标悬停图片变黑白(灰色)

直接使用CSS就可实现图片滤镜效果,即鼠标悬停在图片上面,给图片添加上自定义的样式即可。

程序羊的博客 1821

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

html中如何实现图片虚化,css3如何实现图片的高斯模糊效果?CSS3 Filter(滤镜)实现(代码实例)...

本章给大家介绍用css3如何实现图片的高斯模糊效果,CSS3 Filter(滤镜)实现对图片元素模糊处理;让大家了解如何设置图片元素的模糊效果,通过实例介绍filter实现图片高斯模糊的三种效果。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。一、什么是filter (滤镜)CSS3 Filter(滤镜)属性定义了元素(通常是)的可视效果,提供了模糊和改变元素颜色的功能。CSS3 F...

weixin_29906279的博客 2381

让图片出现幻影效果的CSS代码

代码简介: 这个CSS特效代码很不错,将一幅图片变成拖尾的影子效果,就是大家所说的幻影效果,同样是使用CSS的filter滤镜,一句代码就解决了问题,你可以试着改变他们的参数,会有更炫的效果出现。 代码内容: View Code <html><head><title>让图片出现幻影效果的CSS代码-www.webdm.cn</title&...

weixin_34306593的博客 297

html图片消失代码,HTML图片代码

HTML图片代码2018-09-10一、基础代码二、加边框1、普通黑色边框(浏览器默认黑色)2、简单的CSS装饰框①②③④⑤⑥⑦⑧三、加CSS滤镜1、无参数滤镜①黑白②底片③X光片④水平翻转⑤垂直翻转2、透明效果(opacity=100 透明度0—100)①②③④3、其他特效①浮雕②波纹(Add=是否打乱1或0;Freq=频率;LightStrength=光效强度;Phase=偏移量;Streng...

weixin_29740025的博客 347

css3 滤镜 修改图片的颜色为黑白、使图片变亮、图片使用高斯模糊效果、调整图像的对比度、给图像设置一个阴影效果等图片效果

用css3 滤镜filter 实现你想要的图片效果 (欢迎点赞和关注,感谢您的支持) 以下不满足您需求的,可以在下方留言 ,我来帮助您实现您想要的 <!DOCTYPE html> <html> <head> <style>img { width: 33%; height: auto; float: left; } .blur {-webkit-filter: blur(4px);filter: blur(4px);} .bri...

weixin_41883384的博客 428

使用CSS 中的滤镜 改变png图片颜色

使用CSS中的滤镜和投影,将png图片改变颜色。 原图 <html> <head> <style> div { width: 200px; display: inline-block; } .png { display: block; positio...

厂长的博客 1831

滤镜Filters的十种特殊效果

在日常的css图片样式处理上经常会遇到一些图片细微的模糊、透明、光亮、阴影等效果,下列我们将依此对其进行罗列使用方法。 实现如下图所示的效果:                                              滤镜Filters的十种特殊效果 一、grayscale灰度 .grayscale{ -webkit-filter:graysc

qq_35515563的博客 1039

CSS实现的滤镜效果

滤镜效果如图 CSS部分 /* 实现滤镜关键CSS样式 */ [data-filter*=image-]{flex:0 1 20%;line-height:0;position:relative;z-index:0;} [data-filter*=image-] img{height:auto;width:100%;} [data-filter="image-grays

超浓芝士味玉米片的博客 1505

默认图片是灰色鼠标放上去变彩色css效果代码

<style type="text/css"> A IMG { FILTER: gray } A:hover IMG {FILTER: }</style><a href="http://www.sincol.com"> <img border="0" alt="" src="http...

weixin_30603633的博客 282

css使图片变成黑白效果 - 代码篇

-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; lonk/

草巾冒小子的博客 1010

css中在图片上加透明,css 给图片添加滤镜效果,透明层毛玻璃效果

我们用的第一个滤镜是sepia(),他会给图片增加一整降饱和度的橙色染色效果原图添加sepia滤镜的效果img{width:100%;transition: .5s filter;filter:sepia(2);}img:hover{filter:none;}给色度添加饱和度可以用saturate()filter: saturate(4);两个同时添加的效果filter:sepia(2) satu...

weixin_34850061的博客 1592

html滤镜

滤镜 设置灰度 img{ width:400px ; height: auto; display: block; margin: 0 auto; /*滤镜属性 *设置灰度1为百分之白灰 * */ -webkit-filter: grayscale(1); transition: all 15s; } 正常亮度 .img2{ /* * 亮度属性1正常,2曝光 */ -we

h_shinehhh的博客 374
上一篇: 如何使用渐变字体
下一篇: 融入背景的播放器代码
woaisucai
博客等级 码龄17年 81粉丝 55原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值