css扩展之color-transform
By
admin
at 2017-11-13 • 0人收藏 • 849人看过
<html>
<head>
<title>CSS background/foreground images</title>
<style type="text/css">
body {
font-family:Verdana; font-size:10pt;
width:100%%; height:100%%;
background-color: window;
padding:10px;
margin:0;
}
img
{
foreground-image: url(color-transform.png);
margin: 6px;
}
#c1 img
{
foreground-image-transformation: color-schema(system);
}
#c1
{
background-color: threedface;
}
#c1:hover img
{
foreground-image-transformation: color-schema(darksalmon,salmon,lightsalmon,peachpuff,antiquewhite);
}
#c1:hover
{
transition:blend;
background-color: darksalmon;
}
#c2
{
background-color: threedface;
}
#c2:hover img
{
foreground-image-transformation: colorize(salmon);
}
#c2:active img
{
foreground-image-transformation: colorize(black);
}
</style>
</head>
<body>
<center>Image color transformation. Move mouse over the block below. Image should change color from system gamma to custom set.</center>
<p id="c1"><img src="color-transform.png" /> </p>
<p>But please don't ask me what is going on here...</p>
<p>Well... following is a definition of five strong points of interpolation curve - from pure grey to final color.
<pre>
foreground-image-transformation: color-schema(darksalmon,salmon,lightsalmon,peachpuff,antiquewhite);
</pre>
pixels which are not grey are not converted. That red ball is it. Use this feature when you will want to show the same image in different states.
<center>Image color transformation. <b>colorize</b></center>
<p id="c2"><img src="color-transform.png" /> </p>
</body>
</html>
登录后方可回帖
