VUE网站设置灰色滤镜

guozai0904

已于 2022-12-01 10:45:23 修改

阅读量425

点赞数

分类专栏：小技巧文章标签： vue.js javascript 前端

于 2022-12-01 09:20:16 首次发布

本文链接：https://blog.csdn.net/guozai0904/article/details/128126074

版权

小技巧专栏收录该内容

5 篇文章 1 订阅

订阅专栏

利用CSS filter(滤镜) 属性，不同的浏览器支持形式不同

-webkit-filter: grayscale(100%); /* 兼容 Chrome、Safari 浏览器 */

-moz-filter: grayscale(100%); /* 兼容 FireFox 火狐浏览器 */

-ms-filter: grayscale(100%); /* 兼容 IE 浏览器 */

-o-filter: grayscale(100%); /* 兼容 Opera 浏览器 */

filter: grayscale(100%);

grayscale(100%)设置100% 是灰色

下面是方法

直接找到nginx 配置的静态资源路径，也就是编译后的dist文件夹，正式环境可能不叫dist，如图

打开并编辑index.html 文件

方法一

找到index.html 文件<head> 标签

加入一行代码

<style type="text/css">
html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%); -ms-filter: grayscale(100%);  -moz-filter: grayscale(100%);  filter: grayscale(100%);}</style>

保存则可，无须其他操作

方法二

通过修改index.html 文件<html>标签，以加入内联样式的方法，达到灰色滤镜的效果

代码

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);  -ms-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%);">

修改完成保存则可