图片变模糊的做法

最新推荐文章于 2021-01-29 14:54:03 发布
最新推荐文章于 2021-01-29 14:54:03 发布
阅读量344 收藏
点赞数
分类专栏： Html Css 文章标签： C C++ C# HTML CSS

主要用到了css的滤镜的效果：

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>
    function c_opacity(cur, number) {
      if (number>=0&&number<=100)
        cur.filters.alpha.opacity=number
 }
  </script>
 </HEAD>

 <BODY>
<div>
   <p align="center">
     <a href="#"><img name="image1" src='E:\J2EEWS\SkyAnalysis\WebRoot\images\admin_45.gif' width="35" height="25" border="0" style="filter:alpha(opacity=35)" onMouseOver=c_opacity(image1,100) onMouseOut=c_opacity(image1,35)>
     </a>
  </p>  
   <!--<p align="center" ><a href="#" οnclick="changeStyle(image1);">是你要的效果么？</a></p> -->
  </div>
 </BODY>
</HTML>

 

上面的是鼠标放上去变亮，当鼠标离开时变模糊。还有一个就是：来回切换图片的使图片变亮的做法：

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>
    function c_opacity(curImage) {
      if (curImage=='image1') {
     document.getElementById(curImage).filters.alpha.opacity=100;
  document.getElementById("image2").filters.alpha.opacity=35;
      } else if (curImage=='image2') {
     document.getElementById(curImage).filters.alpha.opacity=100;
  document.getElementById("image1").filters.alpha.opacity=35;
      }
 }
  </script>
 </HEAD>

 <BODY>
<div>
   <p align="center">
     <a href="#" οnclick="c_opacity('image1');"><img id="image1" src='E:\J2EEWS\SkyAnalysis\WebRoot\images\admin_45.gif' width="35" height="25" border="0" style="filter:alpha(opacity=35)">
     </a>
     <a href="#" οnclick="c_opacity('image2');"><img id="image2" src='E:\J2EEWS\SkyAnalysis\WebRoot\images\admin.jpg' width="35" height="25" border="0" style="filter:alpha(opacity=35)">
     </a>
  </p>  
   <!--<p align="center" ><a href="#" οnclick="changeStyle(image1);">是你要的效果么？</a></p> -->
  </div>
 </BODY>
</HTML>

<!--
  图片可以自己来换。
-->

 

 

xyz2011
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 Canvas图片倒影波纹特效
06-24
- 边缘模糊：在波纹边缘添加模糊效果，使其看起来更柔和。 - 光照效果：模拟光照方向，使波纹有明暗变化。 5. **优化性能**： 对于复杂或高性能需求的Canvas应用，性能优化是必不可少的。例如，可以使用离屏...
把图片上的内容弄到电脑上
04-26
将图片上的内容高效地转换至电脑，这一需求在数字化办公时代变得日益迫切。尤其是在处理大量纸质文档时，如书籍、报纸或手写笔记，能够快速、准确地将这些信息电子化，不仅能够节省时间，还能提升工作效率。本文将...
CSS使图片变模糊
小龙哒的博客
01-28 1万+
文章目录效果图html代码css代码 效果图 html代码 &lt;div class="blur container"&gt; &lt;div&gt; &lt;img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1548676269108&amp;di=64...
滤镜图片变黑白+图片模糊
aiting4826的博客
06-24 191
滤镜图片变黑白 只需要给图片元素添加这个类型即可： .togrey{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: g...
模糊滤镜_创意的模糊滤镜，照片后期这么做才独特！
weixin_30284287的博客
01-14 1139
　为什么要给照片添加“模糊”滤镜？　最主要的一个原因是为了让背景虚化。尤其是当背景极其凌乱的情况下，它可以让你毫不费力地将此掩盖，让你的照片看起来“简单干净”。不过，这并不是模糊滤镜的唯一用途，还有更具创意性的“模糊”！取决于使用方式的不同，模糊滤镜可以给观者制造一种梦幻的、活力的感觉。通过滤镜的使用，你可以传达某些确定的情感，比如激动、忧郁或者不安。例如下面这张黑白街拍照，添加了圆形模糊效果后，...
模糊滤镜_如何用 PS，为照片增加模糊与动感效果
weixin_42515512的博客
01-13 1197
在 Photoshop 中，各种丰富的滤镜功能可以为照片带来丰富的效果。今天，我们来谈谈关于模糊滤镜的特点和使用方法。“模糊滤镜是一系列能够为照片带来模糊效果的滤镜的统称，总共有 11 个(以Photoshop CC 2019 为例)。我们可以在菜单栏中的滤镜菜单中找到并运用它们。不同的模糊滤镜有相应的适用范围和效果，其效果大致可分为三类：模糊效果、动态效果和降噪效果。因为降噪效果有更有效的方法，...
模糊滤镜_图片处理：PS中如将图片模糊变清晰的滤镜插件
weixin_30536391的博客
01-13 707
学习永无止境。会学习，会思考，真的是受益非浅。 从小到大都爱学习，可一直是死读书，觉得到最终没有成效，也不愿思考，反正每天的时间匆匆而过，整得身心疲惫，日子也很充实，结果却很不理想。 学习很重要，但会学习更重要。于是，决定利用自己的一点点小特长，发挥自己的小小特色，为每一个关心我的朋友注入正能量，也为您在工作中提高效率，从今天开始我们公众平台上会给大家不定时地提供一...
用css filter做鼠标滑过图片效果
10-30
在网页设计中，使用CSS来增强用户体验和页面交互性是非常常见的做法。其中一个简单而有效的方式是利用CSS `filter`属性来创建鼠标滑过图片时的效果。这种方法不仅能够提升网站的视觉吸引力，还能在不依赖JavaScript...
PS制作空间FASHL绕光子教程
11-17
3. **滤镜效果**：PS的滤镜库包含了很多可以模拟光效的工具，如模糊、发光、噪点等，这些都可以用来构建光线和粒子的感觉。 4. **画笔工具**：画笔工具配合颜色混合模式，可以绘制出各种动态光束，添加细节和亮点。...
使用python matplotlib 画图导入到word中如何保证分辨率
12-20
2. **matplotlib生成的图片过大**：matplotlib生成的图像文件可能尺寸较大，导致在Word中缩放时变得模糊。为解决这个问题，可以使用在线工具如TinyPNG（https://tinypng.com/）来压缩图片，然后再将其插入Word。这...
用width或者height缩小 多倍图，图片变模糊的解决办法
面对疾风吧
01-27 1618
今天拿到一张 294*72 的3x图片，用width或者height缩小，但是发现略有模糊。 加入下面的代码就解决拉 .logo { width: 98px; height: 24px; /* 加入下面css */ image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edg
canvas绘制图片，图片变模糊
harry_yaya的博客
05-07 2929
canvas绘制图片，图片变模糊 问题： 设定一个一定尺寸的canvas，我这里设置的画布大小是400px*400px。当一张图片完全画到画布上的时候，大概率都会出现图片模糊的情况。 我拿下面一张图片画到canvas上作为例子，看上去应该比较明显的有模糊的感觉。 其实在大学的时候我有做过canvas相关的开发内容，也遇到这种问题，当时太菜不懂。单方面的去修改图片精度，换成更高清的图片，事实证明确...
css实现滤镜效果
厚渡
01-29 6498
CSS3 filter(滤镜) 在查看vue官网的时候， 发现这个效果是 用的css3 filter 这个效果还是挺不错的。 使用 filter 这个使用场景也挺多的， 可以对 div ， img … 等等标签 进行设置 img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } 值： CSS 语法 filter: none | blur() | bright
Unity3D中UI图片模糊，不清晰解决怎么解决
热门推荐
游戏开发者
06-30 4万+
很久没写博文，今天刚好有同事问到：NGUI为什么做的界面图片那么模糊，比美术给的图片相比不是很清晰。 其实这个问题解决方法很简单，只要把NGUI生成的图集的图片类型改成“GUI”或者“Advance”（去掉generate mip maps），而且Filter Mode都选择（Point）。 这样即可。
【工具】PPT插入高清图片保存后图片变模糊的解决方法
weixin_30625691的博客
12-11 9065
版本：PPT 2013 问题来源 出于排版需要，在PPT中插入图片时需要将图片缩放很小，但仍要保持其分辨率。先在CorelDraw中随意画了几个图形，导出分辨率为300dpi的背景透明的png格式的图片，如下图。 将其插入PPT中时是正常显示的，将其放大也没有问题，但将其缩放很小后保存PPT后显示如下图。 解决方法 问题应该是PPT的压缩处理导致的，当我...
CSS改变图片由模糊到清晰
lovegonghui的专栏
11-03 8514
使用纯CSS使用的图片初始为模糊，鼠标放在图片上后变得清晰。使用滤镜的可以实现。 模糊时的图片：                                                                                                                                    清晰后的图片：
Unity 图片显示模糊的问题
fieldchao的博客
08-18 5760
项目中无意发现了一个问题，有些UI图片显示会模糊，后面查到问题居然是图片导入的时候，选了Texture这种模式，然后这个模式下，默认开了mipmap,然后就没有然后了，后面改成advance模式，关掉mipmap，UI图片显示就OK了
css图片磨砂化
weixin_33961829的博客
08-18 216
Css代码： .blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(1...
html图片滚动时模糊
最新发布
04-29
当我们使用HTML来滚动图片时，可能会出现图片模糊的情况。这是因为我们在HTML中滚动图片时，使用了CSS的transform属性对图片进行了缩放操作，导致图片出现了模糊。 为了解决这个问题，我们可以试着通过修改CSS的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值