利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。
实现背景色透明效果的代码
- 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性。
- 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及CSS3中的rgba属性之间进行十六进制与十进制的换算。
- 增加对IE9浏览器中的滤镜取消效果
- ★ 鉴于需要做浏览器的hack,使用了:root来让IE9以前的浏览器不支持效果,所以增加了一个需要添加选择符类名的方式,对于这块需要大家在后期添加样式到代码中做单独的处理
- 把CSS代码中的background修改为background-color,只针对背景颜色来操作。
案例:如下
.outer {
width: 100px;
height: 100px;
background-color: rgba(,,,.);
} .inner {
width: 50px;
height: 50px;
background-color: rgba(,,,);
}
通过rgba 来设置 父级div 背景有颜色为透明即可。
其中a代表的就是alpha
弊端:
rgba里面a是代表alpha,就直接设置颜色的透明,但是这个仅限于用在单色上,如果div里是图片就会有问题了~
利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。的更多相关文章
- 熟悉css/css3颜色属性
颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...
- 利用CSS的@font-face属性 在网页中嵌入字体
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
- UITabBar-UITabBarItem图片的背景颜色属性和文字的颜色大小设置
UITabBarItem设置的图片选中状态下默认的是蓝色,如何改变它的颜色为图片自带的颜色呢? typedef NS_ENUM(NSInteger, UIImageRenderingMode) { / ...
- jquery中css获取颜色属性
Jquery获取颜色的方法为: var color = $(元素).css("color"); alert(color); 可以看到color如这样的格式; 但是; 因为rgb(0 ...
- 利用CSS边框合并属性打造table细边框
CSS代码: <style> table{ border-collapse: collapse;/* 边框合并属性 */ width:200px; } th{ border: 1px so ...
- flex组合流动布局实例---利用css的order属性改变盒子排列顺序
flex弹性盒子 <div class="container"> <div class="box yellow"></div> ...
- Linux下利用fork()创建子进程并使父进程等待子进程结束
int status; pid_t t = fork(); if(t){ waitpid(t, &status, 0); }else{ system("vi temp ...
- 利用CSS的translate属性或利用CSS实现图片居中的效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS获取节点的兄弟,父级,子级元素的方法(js获取子级获取到换行与空格元素-FF)
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 < ...
随机推荐
- docker4dotnet #1 – 前世今生 & 世界你好
作为一名.NET Developer,这几年看着docker的流行实在是有些眼馋.可惜的是,Docker是基于Linux环境的,眼瞧着那些 java, python, node.js, go 甚至连p ...
- ExtJS 项目准备工作(一)
首先,需要从网上下载两个文件,一个是SenchaCmd-6.2.0-windows-64bit(我的电脑是window 10 64位) 另一个是ExtJs6的源码包(ext-6.0.0.415). 源 ...
- 一步步开发自己的博客 .NET版(3、注册登录功能)
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- ABP理论之时间
返回总目录 本篇目录 介绍 Clock 时区 绑定器和转换器 介绍 虽然有些应用针对的是一个特定的时区,但是也有一些应用针对多个不同的时区.为了满足这些需求,ABP为datetime操作提供了通用的基 ...
- On cloud, be cloud native
本来不想起一个英文名,但是想来想去都没能想出一个简洁地表述该意思的中文释义,所以就用了一个英文名称,望见谅. Cloud Native是一个刚刚由VMware所提出一年左右的名词.其表示在设计并实现一 ...
- Android Starting Window(Preview Window)
当打开一个Activity时,如果这个Activity所属的应用还没有在运行,系统会为这个Activity所属的应用创建一个进程,但进程的创建与初始化都需要时间,在这个动作完成之前系统要做什么呢?如果 ...
- C#设计模式-备忘录模式
访问者模式的实现是把作用于某种数据结构上的操作封装到访问者中,使得操作和数据结构隔离.而本文要介绍的备忘者模式与命令模式有点相似,不同的是,命令模式保存的是发起人的具体命令(命令对应的是行为),而备忘 ...
- 使用Red Gate Sql Compare 数据库同步工具进行SQL Server的两个数据库的结构比较、同步
将测试版的项目同步(部署)到正式版的时候,两个数据库的结构比较与同步时,如果修改数据库的时候没有记录好修改了那些表,很难将两个数据库进行同步 RedGate Sql Compare使用简介说明: 1. ...
- Jps命令—使用详解
jps是jdk提供的一个查看当前Java进程的小工具, 可以看做是JavaVirtual Machine Process Status Tool的缩写.非常简单实用. 命令格式:jps [option ...
- 巧用javascript对象属性,向事件绑定的匿名函数内传递循环控制变量的值
遇到一个需要向匿名函数传递循环控制变量的问题,我受到园子里这篇文章的启发[笔记]js获取当前点击元素的索引,解决了这个问题.现在把代码贴出来,以防止自己忘记. if ($('#labModal').l ...