How to turn website pages gray with CSS-CSS Tutorial-php.cn

How to turn website pages gray with CSS

小云云

Release： 2018-12-13 10:26:13

Original

5075 people have browsed it

This article mainly introduces you to the relevant information about using CSS to gray out website pages. The article gives detailed sample codes for your reference and study. It has certain reference and learning value for everyone. It needs Friends, let’s take a look below, I hope it can help everyone.

How to turn website pages gray with CSS

If you want to achieve the gray effect in the above picture, the method is as follows:

This CSS code can change the web page to black and white. Add the code to the top of the CSS. Plain dressing is possible.

html{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

Copy after login

If there is no HTML tag in your page, remember to add it. You can add the following HTML5 tag, or change the html of the above CSS tag to body or other.

<!DOCTYPE html>
<html>
</html>

Copy after login

The color of FLASH animation on some websites cannot be controlled by CSS filters. You can insert it between and in the FLASH code:

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

Copy after login

If Some pages with Flash still display color, or the Flash FLV player changes when the browser scroll bar is dragged up and down (such as Jianwang 3, Jianxia World official website divert page), change Flash to JS output (in this case, SWFObject ):

<script type="text/javascript" src="/js/swf.js"></script>
<p id="video_content"></p>
<script type="text/javascript">
<!--
var video_player_so = new SWFObject("video-542.swf", "sotester", "439", "246", "7");
video_player_so.addParam("wmode", "opaque");
video_player_so.addParam("allowfullscreen","true");
video_player_so.addParam("allowscriptaccess","always");
video_player_so.write("video_content");
//-->
</script>

Copy after login

Have you learned it yet? Hurry up and give it a try.

Related recommendations:

How to use CSS to make images semi-transparent

How to use window units for layout in CSS3

About centering of css floating elements

The above is the detailed content of How to turn website pages gray with CSS. For more information, please follow other related articles on the PHP Chinese website!