如何做一个整站变红的插件，试了半天没达到想要的结果。

Question

由于马上2022年春节，突发奇想的想给网站做一个整站变红（喜庆）的插件，因为网站本来有一个整站变灰的插件，想将其代码修改一下来实现，结果却不尽如意。我对这东西真是外行，汗！

插件很简单，由一个CSS和一个PHP文件组成，代码也非常简单，我把代码贴出来，热心朋友可以指点一下，不甚感谢！

1；grayer.css文件代码如下

@charset "utf-8";

/* CSS Document */



html{

    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    filter: gray;

}

2；PHP文件代码如下

<?php



function grayer(){

    echo "<link href='".BLOG_URL."content/plugins/grayer/grayer.css' rel='stylesheet' type='text/css' />";

}

addAction('index_head', 'grayer');

我想，既然整站能变灰，那就也能变红或者变成其他颜色，因为我从没学过这些东西，一般情况下都是自己瞎捣鼓，所以请热心的朋友帮忙设计一下，非常感谢！

Answer 1

主要用到滤镜，测试代码如下

<style>

    html {
        filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
    }
 
</style>
<img src="https://assets.gocity.com/files/ufrfmb391/files/styles/attraction_banner_dskt/public/rsz_01.jpg" />

还可以组合成其他有趣的效果，题主自己研究了

CSS3 filter(滤镜) 属性 | 菜鸟教程 CSS3 filter(滤镜) 属性 实例 修改所有图片的颜色为黑白 (100% 灰度): img {    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */    filter: grayscale(100%);} 尝试一下.. https://www.runoob.com/cssref/css3-pr-filter.html