`

兼容主流浏览器的背景遮盖和居中浮动层的CSS样式

    博客分类:
  • css
 
阅读更多
html, body
{
    height: 100%;
    margin: 0px;
    font-size: 12px;
}
 
.mydiv
{
    background: #f1f1f1;
    padding: 15px 30px;
    border: 5px solid #ccc;
    z-index: 99;
    left: 50%; /*FF IE7*/
    top: 50%; /*FF IE7*/
    margin-left: -150px !important; /*FF IE7 该值为本身宽的一半 */
    margin-top: -60px !important; /*FF IE7 该值为本身高的一半*/
    margin-top: 0px;
    position: fixed !important; /*FF IE7*/
    position: absolute; /*IE6*/
    _top: expression(eval(document.compatMode &&
    document.compatMode=='CSS1Compat') ?
    documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
    document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/
}
 
.bg
{
    background-color: #ccc;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0; /*FF IE7*/
    filter: alpha(opacity=50); /*IE*/
    opacity: 0.5; /*FF*/
    z-index: 1;
    position: fixed !important; /*FF IE7*/
    position: absolute; /*IE6*/
    _top: expression(eval(document.compatMode &&
    document.compatMode=='CSS1Compat') ?
    documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
    document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/
}
 
分享到:
评论

相关推荐

    css3 hover图片遮罩文字显示代码.zip

    【CSS3 Hover图片遮罩文字显示代码】 在网页设计中,CSS3的Hover效果常常用于增强用户体验,使得用户鼠标悬停...通过调整CSS样式,你可以根据需要自定义文字的样式、位置以及遮罩的形状和大小,以适应不同的设计需求。

    div弹出层

    2. **CSS样式**:使用CSS来设置弹出层的位置、大小、背景色、边框、透明度等样式。例如,设置弹出层在页面中心显示,初始状态为隐藏: ```css #popup { position: fixed; /* 固定定位,确保在滚动时依然可见 */ ...

    js点击按钮实现带遮罩层的弹出视频效果

    同时,为了使关闭按钮内的“x”符号居中显示,进行了浮动(float)和定位(top、left、right、bottom、margin)的设置。 - .video-area类定义了视频区域的宽度、高度和背景色。 - .video-shut类则为关闭按钮设置了...

    js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动

    - `#zhezhao`:这是遮罩层的样式,它被设置为绝对定位(position:absolute),并覆盖整个屏幕(width:100%和height:100%),以半透明的灰色(opacity:0.8)来遮盖背景内容。 - `#denglu`:这是登录框的样式,同样是...

    可自己添加html的伪弹出框实现代码

    HTML伪弹出框是一种模拟真实弹出窗口效果的技术,它不需要依赖浏览器的内置弹窗功能,而是通过CSS和JavaScript在页面上创建一个可自定义的浮动元素。这种技术在网页设计中广泛使用,因为它提供了更多的设计自由度和...

Global site tag (gtag.js) - Google Analytics