Sxd0208
Sxd0208
采纳率51.2%
2016-03-14 03:14 阅读 5.9k

怎么让页面背景透明 内容不透明

5

如题 怎么写 可以上页面背景透明 背景上的内容不透明,而且当滚动条移动时 中间不透明的框框不动。提供一个思路即可。。感觉现在无从下手。图片说明类似图片这样的

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

7条回答 默认 最新

  • 已采纳
    showbo GoCityPass新加坡曼谷通票 2016-03-14 08:09

    lightbox而已,不透明的层fixed定位

    
    <!doctype html>
    <style>
        #lightbox{background:#000;filter:alpha(opacity=60);opacity:.5;width:100%;height:100%;left:0;top:0;position:fixed}
        #layer{position:fixed;background:#fff;left:50%;top:50%;width:300px;height:200px;margin-left:-150px;margin-top:-100px}
    </style>
    <div id="lightbox"></div>
    <div id="layer"></div>
    <div style="height:2000px"></div>
    
    点赞 评论 复制链接分享
  • qq_19558705 ITDragon龙 2016-03-14 05:11

    透明度参考:
    前三个参数是颜色,后一个是透明度,效果为白色背景透明

    background-color: rgba(255,255,255,0.2);  
    
    

    内容不动参考:
    定位为固定不动

     position:fixed
    

    http://blog.csdn.net/qq_19558705/article/details/49842073

    点赞 2 评论 复制链接分享
  • bdmh bdmh 2016-03-14 03:28
    点赞 评论 复制链接分享
  • sinat_34254650 yikawb 2016-03-14 06:31

    1.关于透明,可以考虑rgba,就像二楼所说的。唯一不好的就是这是css3属性,低版本的浏览器不兼容。如果要兼容IE8那样的浏览器,可以采取做个透明的1*1
    的背景图片平铺。
    2.关于内容不动,就得用固定定位了。 position:fixed

    
    
    
    
    
    
    
    
    点赞 评论 复制链接分享
  • sinat_34254650 yikawb 2016-03-14 06:44

    我弄了个在线例子,你可以参考参考。上面贴代码没贴进来,又修改不了。只能重新再发了。
    http://sandbox.runjs.cn/show/7p0vbdlk

    点赞 评论 复制链接分享
  • sinat_34254650 yikawb 2016-03-14 07:15

    刚开始没年垤图片。就图片看的话,你这种类似于fancybox插件效果,里面放图片,文字,视频都可以。请参考如下:不会用可以私我。看下参数应该都会用的。

    http://fancyapps.com/fancybox/

    图片说明

    点赞 评论 复制链接分享
  • beacon_2011 beaconD 2016-03-14 09:28

    ie浏览器{filter:alpha(opacity:50);}其他浏览器{opacity:0.5;}
    综上所述{filter:alpha(opacity:50);opacity:0.5;}
    具体想要透明度是多少自己设定

    点赞 评论 复制链接分享

相关推荐