【SASS】 一个Opacity混合器(外加如何让背景透明 文字不透明)
下面就是我的这个Opacity mixins的代码,它支持IE, FireFox, Chrome 以及Safari:
Sass Opacity混合器:
@mixin Opacity($value){$IEValue: $value*100;// opacity: $value;background-color: agba('', $value);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";filter: alpha(opacity=$IEValue);
}
使用
使用就跟其他混合器一样,直接用@include调用即可:
@import "compass/reset";
@import "mixins";
body {background-color: #109d6d;position: relative;main {width: 80%;height: 50%;margin: 100px auto;text-align: center;@include Opacity(1);h1 {position: relative;background-color: #ed4f4f;font-size: 60px;padding: 50px;color: #fff;@include Opacity(.4);}}
}
背景透明 文本不透明
在 FF / Chrome 等较新的浏览器中可以使用css属性background-color
的rgba
轻松实现背景透明,而文字保持不透明。
而 IE6 / 7 / 8 浏览器不支持rgba,只有使用IE的专属滤镜filter:Alpha
来实现,但是这样写法会把文字也变为透明,因此只有在透明容器的子节点(文本节点除外)内设置position: relative
才能不继承其父元素的透明滤镜
另外,应该注意的还有,对于 opacity : ** ; 应该谨用。因为,它会让在chrome / IE / 360………浏览器中的 “ 背景 + 文字 ”全透明化,
而非我们所期望的只要背景透明,文字不透明。
截图:
【SASS】 一个Opacity混合器(外加如何让背景透明 文字不透明)相关推荐
- 如何实现背景/背景图片透明文字不透明
如何实现背景/背景图片透明文字不透明 第一种情况,背景为自定义颜色 第二种情况,背景为图片 总结: 第一种情况,背景为自定义颜色 直接给父级背景颜色设置background:rgba();就可以了: ...
- CSS实现背景图片透明文字不透明效果的两种方法
网页设计中经常要在背景图上放一些文字介绍,这就需要背景图片能有透明效果以便突出显示文字信息,经多方查阅,终于找到了2种有趣的方法. 1.在文字层添加rgba样式实现半透明效果 方法: 背景图片层添加样 ...
- css实现背景透明文字不透明
我们所说的设置透明度实际上是设置不透明度 使用opacity会导致背景和图片都透明,在此处不合适 <!DOCTYPE html> <html> <head> < ...
- 背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)
以背景黑色,透明度0.5举例为大家详细介绍下关于背景透明,文字不透明的最佳方法同时兼容IE,具体实现如下,感兴趣的朋友可以参考下哈希望对大家有所帮助 以背景黑色,透明度0.5举例 非IE:backgr ...
- html文本框背景text怎么变透明,css怎么设置背景图片透明文字不透明?
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果.下面我们来看一下这两种方法的使用. CSS实现背景图片透明,文字不透明效果的两种方法: 方法一(半透明效果) ...
- div背景透明文字不透明
style="width:150px;height:100px;float:left;margin-left:10px;background-color:rgba(255,0,0,0.5); ...
- CSS 背景透明文字不透明
background:rgba(12, 7, 7, 0.45);括号里面的前3个值是rgba的颜色值,0.45是透明度,透明度的范围是0~1,0是完全透明, 1是完全不透明.
- CSS设置文字背景虚化,变透明的两种方法
CSS文字背景虚化,变透明 拥有大背景,让div块变透明的方法: 方法1.背景是透明了,内容也会随之变透明. 方法2.仅背景透明 在整个项目有大背景的前提下,想让某表格背景或div块的背景不是白色,而 ...
- 背景透明,文字不透明效果
1 background-color: #24BA09; 2 color: #fff; 3 filter: alpha(opacity=80);/*为了实现ie8透明度*/ 4 zoom: 1;/*为 ...
- html 字加白色透明,如何给网站背景加一个白色的透明文字
如何给网站背景加一个白色的透明文字 如何给网站背景加一个白色的透明文字,如果对你有帮助就看看吧. 那么如何给网站背景添加呢?其实也很简单,只需要一些代码即可实现,这个代码呢也是站长在其他地方发现的,就 ...
最新文章
- python客户端和服务端实验_python实现socket客户端和服务端简单示例
- 下列关于python的描述正确的是-以下关于Python循环结构的描述中,错误的是( )...
- mysql sql诊断建议_MySQL诊断调优常用SQL语句
- 做领导应该注意的几个问题
- 组合逻辑与lamda算子的历史 英文
- 转-《高性能mysql》并不是一本好书——SQL笔记
- WebApi个人理解概要
- Android 系统(236)---了解 64 位版本
- LG电子发布旋转双屏5G手机Wing 售价约6800元
- oracle让索引失效命令,Oracle中查询时候使index索引失效的限制条件
- 多目标优化算法_阿里提出多目标优化全新算法框架,同时提升电商GMV和CTR
- 概率、随机数、随机数生成函数(面试题)
- (cocos2dx-3.3)3D坐标系
- 大平房到朝阳环路时间表_冰蓄冷系统设计计算10大要点
- Oracle下载12c安装包
- C rgb565转rgb888
- Redis数据存储类型
- 阿里云 Aliplayer高级功能介绍(三):多字幕 1
- MCS51 程序存储器(ROM)
- 各标点符号的英文名称
热门文章
- 三国志战略版:Daniel_兵无常势分析
- 固态硬盘的计算机需要进行磁盘碎片整理吗,有问有答:固态硬盘需要磁盘碎片整理吗?...
- iOS--相册视频MOV转MP4
- 《世界500强企业员工的50条生存法则》(Yanlz+Unity+SteamVR+5G+AI+VR云游戏+生存法则+潜规则+提升竞争力+术业有专攻+卓越理念+立钻哥哥+==)
- 蓝牙耳机无法与计算机连接,电脑连接蓝牙耳机时无法连接
- 实名认证-身份证实名认证-身份证实名认证接口-身份证实名认证api-实名认证api接口-身份证实名认证api接口
- 会议OA项目之我的审批功能
- 创建第一个air程序转自 IT168 静水流深
- Flink从1.7到1.14版本升级汇总
- 一个博客到底有多重要