码迷,mamicode.com
首页 > Web开发 > 详细

css实现纯文字内容元素透明背景(兼容IE6)

时间:2016-07-21 14:47:14      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

HTML:

<div class="title-wrapper">
            <span class="title">
                <span class="icon sp-index sp-index-tag-bg">
                    <i class="mood2 sp-base"></i>
                </span>
                <span class="txt">
                    <span class="occupy">吴奇隆机场推行李车 刘诗诗走其身侧秀美腿</span>
                    <a href="/" target="_blank">吴奇隆机场推行李车 刘诗诗走其身侧秀美腿</a>
                </span>
            </span>  
        </div>

CSS:

.focus-r{width:480px;}
.focus-r-base{width:480px;height:270px;position:relative;overflow:hidden;}
.focus-r-base .title-wrapper{width: 100%;height: 50px;position: absolute;bottom: 12px;text-align: center;}
.focus-r-base .title-wrapper .title{display: inline-block; }
.focus-r-base .title-wrapper .icon{width: 50px;height: 50px; float: left;}
.focus-r-base .title-wrapper .icon i{display: inline-block;width: 33px;height: 33px; margin-top: 8px; text-indent: 0;}
.focus-r-base .title-wrapper .txt{float: left; height:34px;line-height:34px; padding-top: 8px; color:#fff;font-size: 14px; word-spacing: 0;}
.focus-r-base .title-wrapper .txt .occupy{position: absolute; top: 8px; background: #000; filter:Alpha(opacity=60); opacity:.6; padding-right: 10px; border-radius:0 15px 15px 0;}
.focus-r-base .title-wrapper .txt a{color:#fff; padding-right: 10px; position: relative; z-index: 1;}

 

  以上是主要的代码,有几点需要注意:

  • 利用rgba实现有兼容性的问题,所以采用两层覆盖的方法
  • float元素与position:absolute元素平级时,当绝对定位没有指定top/left时,float会在绝对定位元素前面出现
  • 绝对定位元素当不指定top/left时,则相对于offsetParent内容区定位(不同浏览器有差异);当指定top/left时,则相对于offsetParent的margin负边距定位
  • inline-block元素间空隙问题,除了可以删除html中的空格外,也可以设置其word-spacing为负数
  • z-index只适用新的层叠上下文,建立新的层叠上下文的属性有绝对/相对定位及一些css3属性。故本文在用z-index时,把元素设为了相对定位

css实现纯文字内容元素透明背景(兼容IE6)

标签:

原文地址:http://www.cnblogs.com/shytong/p/5691467.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!