文档章节

css实现背景透明文字不透明

张超群的web之路
 张超群的web之路
发布于 2016/06/02 16:43
字数 423
阅读 96
收藏 0

1.为了满足ui设计图我们有时候要用到背景透明文字不透明:
2.一说到透明度就回想到rgba   opacity  ie滤镜   
3.用opacity和ie滤镜会使得文字也变得透明,解决方式我以前是再做一个容器垫在下面,把opacity和ie滤镜设置在这个容器上。
4.对现代浏览器而言我们可以!很容易的利用rgba来实现背景透明文字不透明但是,项目要求兼容到ie8+
用can i use 查看ie8又不支持 rgba    怎么办?因为ie8是支持png透明图片的,我就然设计给我切了1*1像素的图用背景图片填充高就ok了这样就完美解决ie8的兼容性了,不费什么代码。
最后:因为同样的问题我是这样解决的,同事另一个前端是用的hack手段找了一段代码也解决了就把那段代码放出来```

.couser-info-item {
    width: 170px;
    height: 90px;
    margin-right: 10px;
    padding: 8px 8px 5px 15px;
    background: transparent\9;第一句必须设置
    filter:       progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);第二句
    zoom: 1\8;第三句必须设置
    background: rgba(255,255,255,0.2);第四句
    border-radius: 5px;
}
第一句,第三句,是直接写上就行
第二句和第四句需要稍微解释一下:
这个例子是实现的是北京为白色透明度为0.2(第四句)
第二句里面的#33ffffff  ffffff代表白色的十六进制,33 是ie的一个叫不上名字的什么鬼 0.2对应着33  至于0.3对应着多少 0.4 对应着多少  下面有个对比图

© 著作权归作者所有

张超群的web之路
粉丝 0
博文 19
码字总数 10546
作品 0
丰台
程序员
私信 提问
CSS3实现背景透明,文字不透明

最近遇到一个需求,要在图片上显示带有半透明背景的文字,效果如下图所示: 看到这个需求之后,第一反应是使用CSS3中的opacity设置元素的透明度。 效果如下: 这样貌似也满足了需求,不过并不...

neromaycry
2018/06/23
0
0
CSS 图像透明/不透明

使用CSS很容易创建透明的图像。 注意:CSS Opacity属性是W3C的CSS3建议的一部分。 更多实例 创建透明图像 - 悬停效果 创建一个具有文本的拥有背景图像的透明框 实例1 - 创建一个透明图像 CS...

wybo521
2016/01/21
25
0
DUILIB库怎么实现背景透明,文字和图标不透明啊

请教一个问题,用DUILIB库怎么实现背景透明,上面的文字和图标不透明啊?我这里只会全部透明! 谢谢

i211
2014/03/14
2.8K
0
CSS3.0新增属性

背景图片设定 background 默认图片重复 css允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果 background-size规定背景图片的尺寸 background-size:cover 优先宽释放 高度根据宽度...

RanoB
2016/12/27
13
0
css3的设置颜色透明度的笔记

1.transparent的用法:在color、border-color、background的场景,意思为透明。只会是元素的背景色为透明的,元素里面的其他元素或内容都没有影响。 例子: <div class="box"> <p>111111</p......

keai123
2018/07/05
10
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部