`
ljl_xyf
  • 浏览: 636046 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Css实现的图片灰度

    博客分类：
  • html
CSSXHTMLMicrosoftHTML 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <title>Darkness would teach me more appreciative sight!</title>
     <style type="text/css">
     HTML  {
           FILTER: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
          }
    </style>
 </head>
 <body>
 <h1>To face the earthquake, Union is strength.</h1>
 <img src="http://www.my400800.cn /img/11.jpg" alt="banner jpg" />
 </body>
 </html>

 

原图片效果


 

灰度化后效果


  • 大小: 13.6 KB
  • 大小: 15.2 KB
分享到：
| C#3.0入门系列（LinQ）（六）-之OrderBy ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    用css实现的灰度/原色连接效果

    用css实现的灰度/原色连接效果 CSS是一种样式表语言，用于描述HTML和XML文档的表现。CSS可以实现多种视觉效果，包括灰度和原色的连接效果。 灰度连接效果是指在鼠标 hover 时，从灰度图像转换到原色图像的效果。...

    Vue2图像灰度处理两种方式源码

    在Vue2中，图像灰度处理是通过编程方式实现对图像色彩的一种转换，将彩色图像转化为只有黑白层次的灰度图像。通常，这种处理可以通过CSS滤镜或HTML5的Canvas API来实现。下面我们将详细讨论这两种方法。 1. **CSS...

    css页面变灰度兼容ie、firefox、chrome、opera、safari实现样式

    本文主要探讨如何使用CSS实现这一功能，并确保兼容性覆盖到主流浏览器，包括IE、Firefox、Chrome、Opera以及Safari。下面我们将详细讨论CSS中的滤镜（filters）属性，以及如何通过不同的前缀和非标准方法来实现跨...

    背景马赛克实现 背景灰度实现

    在计算机视觉和图像处理领域，背景马赛克和背景灰度是两种常见的处理技术，用于增强图像的视觉效果或者提取特定信息。这两种技术在视频监控、图像分析、人脸识别等领域有广泛应用。下面将详细阐述这两个概念及其实现...

    js+css滤镜实现动态图片显示

    【标题】"js+css滤镜实现动态图片显示"揭示了使用JavaScript和CSS技术来创建交互式、动态的图片展示效果。在Web开发中，图片的动态显示不仅可以增强用户体验，还可以为网站或应用增添视觉吸引力。这篇博客文章通过...

    HTML5+CSS实现图片过滤特效.zip

    这个压缩包“HTML5+CSS实现图片过滤特效.zip”正是一个关于如何利用这两种技术创建图片过滤效果的实例。 首先，HTML5作为下一代网页标记语言，提供了更多的结构化元素和媒体支持。例如，`&lt;canvas&gt;`元素允许在网页上...

    CSS实现半透明效果

    在本主题中，我们将深入探讨如何使用CSS实现半透明效果，这是一个常见的视觉设计技巧，可以使网页元素呈现出不同程度的透明度，从而增加界面的层次感和美感。 在CSS中，半透明效果主要通过调整元素的`opacity`属性...

    CSSCO用CSS实现的照相滤镜

    【CSSCO：CSS实现的照相滤镜】 在网页设计和开发中，视觉效果往往扮演着至关重要的角色，其中照片滤镜就是一种增强用户体验、营造特定氛围的有效手段。CSSCO项目，灵感来源于VSCO（一个广受欢迎的照片编辑应用）和...

    CSS3实现的十五种图片经过文字显示特效源码下载

    以上就是利用CSS3实现图片经过文字显示特效的一些核心知识点。通过熟练掌握这些技术，开发者可以创造出引人入胜的网页交互效果，提升用户体验。在实际项目中，你可以根据需求选择合适的特效，并结合HTML结构和...

    处理图片，图片去色,返回灰度图片,把图片变成圆角,图片合成

    其次，返回灰度图片是将彩色图像转换成只有黑白层次的图像。灰度图像的每个像素用一个8位字节表示，提供256个级别的灰度。在处理过程中，可以通过加权平均法将RGB值转换为灰度，权重通常是0.21R + 0.72G + 0.07B，...

    HTML5+CSS实现的15款图片过滤特效源码.zip

    在这个名为"HTML5+CSS实现的15款图片过滤特效源码.zip"的压缩包中，包含了15个不同的示例，展示了如何使用这两种技术来实现图片的过滤和美化效果。以下是对这些知识点的详细解释： 1. **HTML5 Canvas**: HTML5的...

    CSS3图像过滤移轴效果 CSS3图像过滤移轴效果网页特效.zip

    本文将深入探讨“CSS3图像过滤移轴效果”，这是一种利用CSS3滤镜（filter）属性来实现图像视觉变换的技术，常用于创建各种特效，如图像的模糊、灰度、饱和度调整以及我们关注的移轴效果。移轴效果通常在摄影中应用，...

    HTML5实现CSS滤镜图片切换.zip

    CSS滤镜是CSS3中的一个重要特性，它可以让开发者对图像应用各种视觉效果，如模糊、灰度、对比度调整等。常见的滤镜函数有`filter: blur()`, `grayscale()`, `brightness()`, `contrast()`, `saturate()`, `sepia()`...

    CSS3图片过滤分类功能

    在“CSS3图片过滤分类功能”中，我们将深入探讨这一特性，了解如何通过CSS3实现不同的图片过滤效果，并将其分类。 1. 颜色调整： - `hue-rotate()`: 这个滤镜可以改变图像的色调，通过一个角度值来旋转色彩轮，...

    纯CSS3 实现的图像浸润滤镜特效源码.zip

    在本资源中，"纯CSS3 实现的图像浸润滤镜特效源码.zip" 提供了一种利用CSS3技术来实现独特的图像处理效果——浸润滤镜特效。这种特效可以使图像看起来仿佛被水或其他液体浸润，为网页设计增添视觉吸引力。下面将详细...

    CSS3图片展示效果

    为了提高网页加载速度，可以利用CSS3的`content`属性结合JavaScript实现图片的懒加载。只有当图片进入可视区域时，才会加载对应的图片资源。 6. 图片响应式设计： CSS3的媒体查询(`media queries`)使得图片能够...

    CSS 鼠标移动图片由黑白变成彩色

    本文将深入探讨如何使用CSS实现一个有趣的视觉效果：当鼠标悬停在图片上时，图片由黑白变为彩色。这个效果可以为用户带来更丰富的交互体验，增加网页的吸引力。 首先，我们需要一个HTML结构来承载我们的图片。以下...

    CSS鼠标悬停图片上图片变灰 变色 半透明

    在这个特定的问题中，我们关注的是如何通过CSS实现鼠标悬停时图片效果的变化，比如图片变灰、变色以及半透明。下面将详细介绍这些效果的实现方法。 1. 图片变灰： 当鼠标悬停在图片上时，可以使用CSS的`filter`...

    CSS3鼠标悬停图片模糊过渡动画特效

    2. **滤镜（Filter）**：CSS3的滤镜功能可以用于图像处理，如模糊、灰度、饱和度等。在这里，我们主要用到的是`filter: blur();`，它可以使元素变得模糊。当鼠标悬停时，我们增加这个属性以创建模糊效果。 3. **伪...

Magicbox
Global site tag (gtag.js) - Google Analytics