一站式百度SEO排名优化!-找老刘博客 低投入,高转化,精益求精、一丝不苟:旨在提供更好的SEO服务!

首页>>前端开发

网站页面黑白色滤镜效果实现技巧

首页 2022-12-01 前端开发 1560 ℃Tags: filter 滤镜 css


一、前言

在很多时候我们需要把整个网站变灰,比如“致敬”。来看看网站是如何实现整体变灰的。

人的一生是短暂的,重要的是能够在短暂的时间内造就无限的价值。由衷的表示致敬我们将永远铭记!

微信截图_20221201085333.png

如果首页html换成黑白风格的,这个好实现。可是每个封面图都重新做一张黑白的版本,每个都是用户自己的投稿啊,怎么保证封面图都能黑白色呢?后期靠人工换的话,那代价也大了,而且也很傻。

二、解密HTML如何将网站变为黑白

众所周知我们平时使用的网站都是IT从业者辛勤劳动所创造出来的,其实创造一个黑白网页其实并不难,真的很简单,因为只需要一行代码。

html {-webkit-filter: grayscale(100%);}

是的你没看错就这一行一个网页就变成了一个灰度图

下面我将进行一次简单的演示

这是一个非常简单的一段HTML代码

突然我发现在html根结点html标签下面有一个属性:filter: grayscale(1);

image.png

这是一个非常简单的一段HTML代码

html{
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}

filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。

浏览器支持:

grayscale():

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



image.png

三、IE浏览器

上面所说的css3属性IE浏览器并不支持,其实这样做已经覆盖了大部分浏览器

filter: gray;

这个属性直接加载html上是不管用的,如果需要图片变灰可以只将样式作用于img标签,或者用*通配符作用于所有元素,这样整个网站就会变灰。

经测试,在IE7-9都是没问题的,IE9以上不能生效。

四、通用方案

如果你执意所有的浏览器都有这个效果,可以通过Greyscale.js实现:

在页面引入js文件:

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

然后:

grayscale(document.getElementsByTagName("img"));

或者直接这样:

grayscale(document.getElementsByTagName("html"));

实现原理:IE浏览器下是添加灰度滤镜,这个大家都懂的。其他浏览器貌似使用Canvas中的getImageData方法,然后对每个像素点进行灰度转换。

因此,在现代浏览器下,对于该方法,图片的灰度处理有两个局限性:

1. 速度。300*300这张一般般大小的图片变灰就要数秒之久;

2. 跨域。安全性机制,无法转换跨域的图片为黑白色。

五、更多

除了黑白色,我们还可以实现别的效果吗?是可以的,请注意filter属性,MDN如是说:

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。

模糊度 filter: blur();

image.png

对比度:filter: contrast();

image.png

色相旋转:filter: hue-rotate(); 

image.png

阴影: filter: drop-shadow() ;

image.png

搜索
分类
热门标签
  • 首页
  • 电话
  • QQ