css实现纯文字内容元素透明背景(兼容IE6)
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)的更多相关文章
- css 背景透明文字(内容)不透明三种实现方法
好久没写博客了.以前还想着最少一个月抽空写几篇.结果没做到O(∩_∩)O~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明, ...
- css透明背景兼容方案
css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样 ...
- p标签多行文字内容实现上下垂直居中兼容ie8
之前实现上下居中一般都是用height和line-height的来设置. 今天在修改样式的时候,p标签的文字内容可能是一行也可能是两行, 所以用height和line-height就没效果. 今天找到 ...
- 使用css的-moz-element()把html元素当背景图片去
background:-moz-element(id)定义了一个从任意HTML元件产生的值.此图像是实时的,这意味着如果更改了HTML元素,则会自动更新使用结果值的CSS属性.element() &l ...
- layedit富文本编辑器获取纯文字内容和全部内容
- jquery元素分组插件,用于把一连串元素分成多组,如把多个a标签分成多组放入<li>元素中,可以用于简化多图滚动为一个元素滚动,兼容ie6
三个参数 <script type="text/javascript"> /* *sclass:设置包裹元素的类 * packages:设置包裹的元素 * row:设置 ...
- CSS实现背景透明,文字不透明(兼容各浏览器)
在 FF/Chrome 等较新的浏览器中可以使用css属性background- color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜f ...
- CSS三角的写法(兼容IE6)
目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样 ...
- 【原】CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
随机推荐
- Rancher 2.0 简单使用 重要部分截取
学习地址 : https://rancher.com/docs/rancher/v2.x/en/quick-start-guide/ Install Rancher sudo docker run - ...
- 解决IE浏览器缓存导致AJAX请求数据异常
IE10浏览器会把AJAX请求的数据都缓存下来,然后每次想去刷新数据时发现数据都是一样的,于是导致数据显示异常. 解决方法: 在页面<head>标签里,加上以下声明: <!-- 解决 ...
- easyui Tree树形控件的异步加载
Tree控件 $('#partyOrgTree').tree({ checkbox: false, url: getDataUrl, onClick: function (node) { getDiv ...
- pycharm快捷键及中文说明【使用翻译工具一条一条翻译】
Search Everywhere: Double Shift Go to File : Ctrl+Shilf+N Recent Files: Ctrl+E Navigation Bar: Alt+H ...
- hibernate save数据的时候报错:ids for this class must be manually assigned before calling save()
这个错误是因为eclipse 这种jpatools 自动生成的实体类内没把id 设置为自增,还有id的值在生成的时候默认为string 即使加上了也所以无法自增 ,所以还需要把string 换成In ...
- Eigen子矩阵操作
1 子矩阵操作简介 子矩阵操作又称块操作,在矩阵运算中,子矩阵的提取和操作应用也十分广泛.因此Eigen中也提供了相关操作的方法.提取的子矩阵在操作过程中既可以用作左值也可以用作右值. 2 块操作的一 ...
- Java 数组元素合并并去重
public class TestList { public static void main(String[] args) { Set<Integer> set = new TreeSe ...
- SQL里执行CLR c#代码
这里只说一个重点: 1.直接在sql里执行clr代码的时候,sql还是会报错 说没有启用 clr 执行以下代码才会起作用 EXEC sp_configure 'clr enabled', 1; RE ...
- 解决vs code 内置终端,字体间隔过大问题。(linux centos7成功)
如图. 去文件-首选项-设置里修改. "terminal.integrated.fontFamily": ""注意此处默认为空白,所以显示的就比较奇怪. 此处我 ...
- Linux 第十一天
2)SetGID i只有可执行的二进制程序才能设置SGID权限 ii命令执行者要对该程序拥有x(执行)权限 iii命令执行在执行程序的时候,组身份升级为该程序文件的属组 iv SetGID权限同样只在 ...