rgba浅灰色半透明

CSS3 之 RGBa 可透明颜色

在 CSS3 中,增加了一个 opacity 属性,允许开发者设置元素的透明度,现在 opacity 已被主流的现代浏览器支持,但 opacity 会把被设置的元素及其子元素同时设置为同一个透明度,这样的透明规则相当不灵活,在实际开发中往往也是会遇到很多麻烦.其实,在 CSS3 中还有另外一套颜色透明解决方案 —— RGBa .相对于 opacity ,RGBa 可以在单个元素上设置透明度,而不影响其子元素,只是 RGBa 的浏览器支持度并没有 opacity 的广泛,因此相对较少引起开发者注意

真~让IE8支持background: rbga; ，IE8下兼容rgba颜色的半透明背景

IE8下兼容rgba颜色的半透明背景这样的标题在百度和google搜索下很多篇文章,讲解IE8下兼容rgba的. 这些文章全部都是使用IE下的filter来使元素透明,但是这个里面会有bug. 它们的如下: background: rgba(0,0,0,.5); /*支持rgba的浏览器*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); IE f

Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）

内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor Visual Studio Code 1.32.1 typesetting Markdown code <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U

IE8下兼容rgba颜色的半透明背景

在工作中做一个图片半透明遮罩时发现在IE8下不兼容一查再知道IE8不支持rgba颜色,再搜搜兼容性方法,没想到这么快就解决了. 先说说rgba的含义: r代表red,g代表green,b代表blue,a代表透明度.红绿蓝是三原色,所有颜色都可以由这三种颜色拼合而成.比如rgba(0,0,0,.5)就是透明度为0.5的黑色.现代浏览器是支持rgba的,但是在IE8等古董级浏览器中是不支持rgba的,IE8只能勉强支持rgb()函数(即去掉了透明度,只能表示颜色). 网上的解决方法是: backg

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

首先要说明的是背景是内容的祖先元素.如果是兄弟节点那就没有必要记录这篇文章了. 记录一下,知其然也知其所以然. IE8-特点: 1.不支持"opcity:0.5;"这种写法,只支持"filter:alpha(opacity=50)". 2.如果背景元素拥有css属性设置了z-index的值(除默认值auto外),则内容会随着背景元素一起半透明 3.如果背景元素的内容元素本身或其祖先节点(这些祖先节点是背景元素的后代节点)没有设置css定位属性position:rel

使用RGBa和Filter实现不影响子元素的CSS透明背景

点击查看原文问题如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片在CSS中使用opacity有两个问题,一是为了适应所有的浏览器,我们要对付opacity讨厌的语法:二是opacity不仅使目标元素的背景变得半透明,而且使它所有的子元素的背景也变成了半透明.这意味着它里面所有的文本(译者注:图片也一样)都具有同样的透明度,我敢肯定没几个人想要这样的效果.可以通过添加一些不必要的元素,使用CSS定位技巧类似的手段

HTML色码表

颜色名称及色样表(HTML版) 颜色名中文名称 Hex RGB 十进制 Decimal LightPink 浅粉红 #FFB6C1 255,182,193 Pink 粉红 #FFC0CB 255,192,203 Crimson 深红(猩红) #DC143C 220,20,60 LavenderBlush 淡紫红 #FFF0F5 255,240,245 PaleVioletRed 弱紫罗兰红 #DB7093 219,112,147 HotPin

3D屏保:排色榜

3D屏保:排色榜排色榜,是一个针对图形学中的色彩进行排序的DEMO,这里的色是色彩的意思,看成别的点进来的同学请自觉面壁.该DEMO可以按RGB,GBR,BRG,灰度值四种方式进行排序.排序算法为冒泡排序,之所以选择这种排序算法,是因为该算法容易实现相邻两个颜色的交换旋转. 前些天看到一个图片是关于四六级中关于颜色的单词和GRE中关于颜色的单词的对比.我突然想到有必要定义一套图形学中的色彩,然后将其一一摆列显示出来.这样当我写程序时想选择一个颜色时,启动该程序选就是了.记得我写自己的第一款游戏

Effective前端1：能使用html/css解决的问题就不要使用JS

div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme-info .field{font-weight:bold}#crayon-theme-info .field,#crayon-theme-info .value{margin-left:5px}#crayon-theme-info .description.value{font-style:ital

css揭秘--笔记（未完）

第0章关于本书 1, 本书要用到一个工具函数————$$(),它可以让我们更容易获取和遍历所有匹配特定css选择符的dom元素: function $$(selector,context){ context=context||document; var elements=context.querySelectorAll(selector); return Array.prototype.slice.call(elements); } 2, 以下实现一个效果: linear-gradient(#

Bootstrap CSS 栅格、代码和表格

一.bootstrap栅格 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. Bootstrap 网格系统(Grid System)的工作原理: 网格系统通过一系列包含内容的行和列来创建页面布局.下面列出了 Bootstrap 网格系统是如何工作的: 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding). 使用行来创建列的水平组. 内容应该放

css基础知识点

回顾 1.结构标记 <header></header> <nav></nav> <section></section> <aside></aside> <article></article> <footer></footer> 2.表单 1.作用用于收集 ,显示用户的信息并提交给服务器 2.组成 1.表单元素 1.语法 <form></for

Translucent Bar Android状态栏自定义颜色

Android4.4 一个很重要的改变就是透明系统栏..新的系统栏是渐变透明的, 可以最大限度的允许屏幕显示更多内容, 也可以让系统栏和 Action Bar 融为一体, 仅仅留下最低限度的背景保护以免通知通知栏内容和 Action Bar 文字/图标难以识别.谷歌把这种效果称之为:Translucent Bar. 它的初始目的就是要最大化可视面积和淡化系统界面的存在感.其效果如图: 实现方法也很简单(仅限4.4以上的系统) 1.新建主题我这里分成了3个主题(4.4之前用的主题.4.4~5.0用

基于HTML5快速搭建3D机房设备面板

以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟的设备是机房设备,先来目睹下最终效果:http://www.hightopo.com/demo/blog_3d_20150810/server.html 我来解释下这个模型,一个带有透明玻璃门的机柜,机柜里装有5台设备,门可以开合,设备可以插拔,那么我么该如何搭建这样的设备呢?方法不难,我们一步一步

基于HT for Web 快速搭建3D机房设备面板

以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟的设备是机房设备,先来目睹下最终效果: 我来解释下这个模型,一个带有透明玻璃门的机柜,机柜里装有5台设备,门可以开合,设备可以插拔,那么我么该如何搭建这样的设备呢?方法不难,我们一步一步来. 我们先从设备开始,设备的示意图如下: 看起来有模有样的,其实呢,它就是一个长方体,然后在长方体的正面贴上一张

基于HT for Web 3D技术快速搭建设备面板

以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟的设备是机房设备,先来目睹下最终效果: 我来解释下这个模型,一个带有透明玻璃门的机柜,机柜里装有5台设备,门可以开合,设备可以插拔,那么我么该如何搭建这样的设备呢?方法不难,我们一步一步来. 我们先从设备开始,设备的示意图如下: 看起来有模有样的,其实呢,它就是一个长方体,然后在长方体的正面贴上一张

详解Bootstrap表单组件

表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS: forms.less SASS: _forms.scss bootstrap仅对表单内的fieldset.legend.label标签进行了定制 fieldset { min-width:; padding:; margin:; border:; } legend { display: block; width: 100%; padding:; margin-bo

从WeUI学习到的知识点

WeUI是微信Web服务开发的UI套件, 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Icons, Panel, Tab, SearchBar). Demo页面: https://weui.io Github页面: https://github.com/weui/weui 下面讲一讲我从WeUI中学到的CSS技巧. Button 从这里我开始注意到, WeUI的实现中, 很多边框都是用:

Bootstrap学习笔记上（带源码）

阅读目录排版表单网格系统菜单.按钮做好笔记方便日后查阅o(╯□╰)o bootstrap简介: ☑ 简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集. ☑ 基于html5.css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档. ☑ 自定义JQuery插件,完整的类库,基于Less等. bootstrap模板为使IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,

ios基础知识

1获取系统语言设置 NSUserDefaults *userDefault = [NSUserDefaults standardUserDefaults]; NSArray *languages = [userDefault objectForKey:@"AppleLanguages"]; NSString *preferredLang = [languages objectAtIndex:]; 缓存路径下文件大小 - (unsigned long long int) cacheFol

Android颜色大全

<?xml version="1.0" encoding="utf-8"?> <resources> <color name="base_bg">#f4f6f6</color>  <color name="Theme_green">#669966</color> //102 153 102 <color na

rgba浅灰色半透明

热门专题