css扩展之color-transform

By admin at 2017-11-13 • 0人收藏 • 478人看过
<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>

gifTest.gif

登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
Sciter中文在线文档Sciter在线学习文档
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
C大Aardio论坛:Aar爱好者论坛
简码教程网:简码编程
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...