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号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
随机推荐
- Laravel5 (cli)命令行执行脚本及定时任务
Artisan是Laravel自带的命令行接口名称,它提供了很多有用的命令想要查看所有可用的Artisan命令,可使用list命令查看: 1 php artisan list 每个命令都可以用help ...
- Django contenttypes 应用
Django contenttypes 应用 什么是Django ContentTypes? Django ContentTypes是由Django框架提供的一个核心功能,它对当前项目中所有基于Dja ...
- VS中程序包错误,引用错误该如何解决
1.找到包的文件.packages.config 对应于: 2.删除掉 packages.config 报错的项.然后再重新添加一次.就没有解决的不了的问题. 是不是很爽.....
- 快速解决MariaDB无密码就可以登录的问题
mysql Ver 15.1 Distrib 10.1.37-MariaDB, for Linux (x86_64) using readline 5.1 #mysql -uroot -p #del ...
- mybatis的resultMap与resultType的区别
一.概述MyBatis中在查询进行select映射的时候,返回类型可以用resultType,也可以用resultMap,resultType是直接表示返回类型的,而resultMap则是对外部Res ...
- selenium实现淘宝的商品爬取
一.问题 本次利用selenium自动化测试,完成对淘宝的爬取,这样可以避免一些反爬的措施,也是一种爬虫常用的手段.本次实战的难点: 1.如何利用selenium绕过淘宝的登录界面 2.获取淘宝的页面 ...
- 《Linux就该这么学》第四天课程
秦时明月经典语录: 侠道:五步之内,百人不当.十年磨剑,一孤侠道——荆轲 我发了一些课堂笔记,供你们参考 原创地址:https://www.linuxprobe.com/chapter-03.htm ...
- sock5协议转换http协议工具polipo使用笔记(Centos7)
一.安装 Shadowsocks使用socks5协议,而终端很多工具目前只支持http和https等协议,所以我们为终端设置Shadowsocks的思路就是将socks5协议转换成http协议,然后为 ...
- Alpha冲刺-(9/10)
Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 进一步优化代码,结合自己负责的部分修 ...
- C/C++ 的宏中#和##的作用和展开
C/C++ 的宏中: (1) # 的功能是将其后面的宏参数进行字符串化操作,简单说就是在对它所引用的宏变量通过替换后在其左右各加上一个双引号. 也就是说: #define __TO_STRING_IM ...