Question

html +css 如何实现以下功能 第二幅图是自己测试的 但是有问题





Answer 1

1. 在ps里面建一个层，填充黑色，透明度设置成50%-80%左右，把底下默认背景层删除，然后另存为web格式，选png24，存出来是张半透明图片，然后网页里用这个图片做背景图，缺点是低版本ie不支持png24的透明，需要另外引入一个js来解决，百度：dd png可以找到这个js

   
   

2. 直接用css3的rgba颜色做背景，rgba(0,0,0,.6);最后那个.6代表60%的透明度，缺点是低版本ie不支持，ff等后面几年崛起的浏览器支持很好，如果你做的界面专门针对手机或平板，不考虑电脑的话，可以放心用，手机平板浏览器基本上都支持




3. 用css透明度，定义个样式，这你的div上引用即可，缺点是白色的文字也会跟着透明

   .tbg {
     filter:alpha(opacity=50);

     -webkit-opacity:0.5;
     -moz-opacity:0.5;
     -khtml-opacity: 0.5;
     opacity: 0.5;
   }

   
   

4. 用上面3的方法class="tbg"让div背景透明，但是文字部分不放在这个div里面，而是放在另一个div或p里面，并用css定位和z-index把文字位置放到透明div上面去，这样文字不会跟着透明

方法不止一种，根据需求自行取舍..