CSS半透明层的实现非透明文字层和半透明图片层立体效果
Posted by ericy on 8 10月, 2011
No comments yet
This item was filled under [ 设计理论 ]
CSS半透明层的实现，主要就是灵活运用filter中alpha的效果，使两层之间产生立体效果。 在本示例中，最低层的是一张图片，上边是一个透明度被定义为60%的Div层，层内是文字，因为上面的曾非100%透明，因此可以看到下层的图片，也就是文字层盖住的地方半透明显示下面图片，没用盖住的地方，还是完整显示下面的图片，形成立体效果。 例子代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> CSS半透明层的实现</title> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <style> #container { position: absolute; top: 20px; left: 20px; width: 400px; height: 300px; background: url(images/pic.jpg) no-repeat; } #container .textblock { filter: alpha(opacity=60); opacity: 0.6; margin-top: 50px; margin-left: 50px; width: 280px; background: #ffffff; border: 1px solid [...]