text.html

 
<p class="zw">你可能一开始认为亮度 <code>brightness</code>只适用于照片或者其他图像，但实际上，从文本元素到整个页面，都可以改变亮度。在接下来的例子中，我们将会把Stuff & Nonsense网站上部的图片亮度降低到<code>50%</code>。</p> 
<pre class="代码无行号"><code>.filter { 
filter : brightness(50%); }</code></pre> 
<p class="图"><img alt="1702.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/199.jpg"></p> 
<p class="zw">亮度 <code>brightness</code>滤镜接受百分比值。当值为<code>100%</code>时，元素保留原来的样子。当值在<code>0%</code>至<code>100%</code>之间调整，减小值会逐渐变暗直到变成黑色，而当值超过<code>100%</code>并一直上升，直到元素看起来像是烧糊了一样。</p> 
<p class="zw">与亮度 <code>brightness</code>一样，对比度<code>contrast</code>滤镜也可以应用到任何元素上。为了和亮度 <code>brightness</code>对比，我们继续在这幅图片上做对比度的示例。</p> 
<pre class="代码无行号"><code>.filter { 
filter : contrast(50%); }</code></pre> 
<p class="图"><img alt="1703.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/200.jpg"></p> 
<p class="zw">对比度<code>contrast</code>同样可以使用百分百单位。对比度为<code>0%</code>时，高亮的部分和阴影部分的对比很弱，形成了一个灰蒙蒙的效果。对比度为<code>100%</code>时，元素保持原样。当值超过<code>100%</code>时，就会形成一些非常有趣的效果。像前面蒙太奇风格的示例。</p>