今天有看到司徒正美《背景半透明rgba最佳实践》的文章和里面推荐的一个在线工具CSS背景颜色属性值转换  。

于是联系到自己的less库,新技能Get。

内容如下:

 /*在你的less库中加入以下代码*/
//rgba创建兼容IE的rgba
#rgba(@r,@g,@b,@a){
@c: rgba(@r,@g,@b,@a);
@c2 :argb(@c);
/* for IE9 IE8 IE7 not sure about IE6*/
filter:~"progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='@{c2}', endColorstr='@{c2}')";
background-color:@c;
:root &{
/*
* IE9 由于rgba和filter都支持,会导致两个颜色叠加,使用hack去除
* \9 代表 IE9 以下浏览器支持
* :root 只有 IE9+ 以及其他现代浏览器支持
* IE10 以上不再支持 filter
*/
filter:none;
}
}

使用方法:

/*LESS 里面这样写*/
.demo{ #rgba(255,0,0,0.3); } /*解析后的css为*/
.demo {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#4dff0000', endColorstr='#4dff0000');
background-color: rgba(255, 0, 0, 0.3);
}
:root .demo { filter: none;}
本文为原创文章,会经常更新知识点以及修正一些错误,转载请保留原出处。
 

如果您觉得这文章对您有帮助,可以打赏点钱给我,鼓励我继续写一些高质量的博文。

【27前端】背景半透明rgba LESS实践的更多相关文章

  1. 背景半透明rgba最佳实践

    by 一丝 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  2. [小技巧]兼容IE6的纯CSS背景半透明文字不透明

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 兼容IE、Firefox的背景半透明内容不透明设置

    首先要说明的是背景是内容的祖先元素.如果是兄弟节点那就没有必要记录这篇文章了. 记录一下,知其然也知其所以然. IE8-特点: 1.不支持"opcity:0.5;"这种写法,只支持 ...

  4. css设置div等标签背景半透明

    三种方式: 1. background-color: transparent; 直接设置背景为透明 2.这种是子元素也会跟着变成半透明 /* 背景半透明,1为不透明 */ opacity: 0.5; ...

  5. Android PopupWindow 弹窗背景半透明,设置最大高度

    首先讲一个网上的方法: popupwindow弹出后,屏幕背景变成半透明这个效果很普通.实现的方法也很多.我使用的可能是最简单的一种,就是设置一下getWindows的透明度. /** * 设置添加屏 ...

  6. DIV背景半透明文字不半透明的样式

    DIV背景半透明,DIV中的字不半透明 代码如下:<body bgcolor="#336699"> <div style="filter:alpha(o ...

  7. WPF Window背景半透明 ,蒙版操作实现

    原文:WPF Window背景半透明 ,蒙版操作实现 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/detail ...

  8. swift之弹出一个背景半透明的UIViewController

    坑爹的背景半透明,按网上给出oc的方法,动画结束之后,半透明效果消失.通过各种折腾,各种试验,终于搞定了. let viewController=storyboard.instantiateViewC ...

  9. 背景 半透明问题 rgba + filter

    <html style=" background: violet;"><head><meta charset="utf-8"> ...

随机推荐

  1. Hard Process(二分)

    Hard Process Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submi ...

  2. hdu 3954 Level up(线段树)

    题目链接:hdu 3954 Level up 题目大意:N个英雄,M个等级,初始等级为1,给定每一个等级须要的经验值,Q次操作,操作分两种,W l r x:表示l~r之间的英雄每一个人杀了x个怪物:Q ...

  3. AIX-vi操作-提示Unknown terminal type的问题解决方法

    AIX-vi操作-提示Unknown terminal type的问题解决方法AIX Version 5.3$ vi /etc/profilelinux: Unknown terminal type[ ...

  4. php安装扩展模块(curl模块)

    php安装扩展模块的思路: 1,首先找到需要安装的扩展模块的目录.一般在/usr/local/php/ext目录下 但是有的模块php源码中不一定有,需要自己下载比如memcache.redis等. ...

  5. Input输入字体颜色改变js(兼容IE)

    从网上找的代码,自己封装了一下(前提:引用jQuery库) 方法1: HTML: <div class="box"> <div class="ipt1& ...

  6. queue 之团队队列(摘)

    有t个团队的人正在排一个长队.每次新来一个人时,如果他有队友在排队,那么这个新人会插队到最后一个队友的身后.如果没有任何一个队友排队,则他会排到长队的队尾. 输入每个团队中所有队员的编号,要求支持如下 ...

  7. python3.4下遍历文件目录,不需要再特殊处理中文编码

    python3.4下遍历文件目录,不需要再特殊处理中文编码 直接使用os.walk来遍历中文目录. os.walk方法返回的是一个三元 tupple(dirpath, dirnames, filena ...

  8. cocos2d-x中的Tiled地图

    cocos2d-x中的瓦片地图是通过tiledMap软件制作的,存档格式是.tmx格式.此软件的使用步骤简单总结如下: (1)制作瓦片地图 1 打开软件,软件界面如下图. 2. 新建地图(文件-> ...

  9. SQL Server 查看备份集元数据的 4 种方法。

    方法 1. restore labelonly 方法 2. restore headeronly 方法 3. restore filelistonly 方法 4. restore verifyonly ...

  10. Ubuntu10.4 Install DB2V9.5

    1. Download the DB2V9.5 Software from URL:  http://www14.software.ibm.com/webapp/download/search.jsp ...