Home  >  Article  >  Web Front-end  >  How to turn website pages gray with CSS

How to turn website pages gray with CSS

小云云
小云云Original
2017-12-19 10:11:095122browse

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);
}

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>

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"/>

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>

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn