2 sxd0208 Sxd0208 于 2016.03.14 11:14 提问

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

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

7个回答

showbo
showbo   Ds   Rxr 2016.03.14 16: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
qq_19558705   Ds   Rxr 2016.03.14 13:11

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

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

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

 position:fixed

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

bdmh
bdmh   Ds   Rxr 2016.03.14 11:28
sinat_34254650
sinat_34254650   2016.03.14 14:31

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





sinat_34254650
sinat_34254650   2016.03.14 14:44

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

sinat_34254650
sinat_34254650   2016.03.14 15:15

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

http://fancyapps.com/fancybox/

图片说明

beacon_2011
beacon_2011   Rxr 2016.03.14 17:28

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!