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:095149browse
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.
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
<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!