css 透明度 opacity filter rgba(r,g,b,a)

最新推荐文章于 2024-04-26 19:17:54 发布
最新推荐文章于 2024-04-26 19:17:54 发布
阅读量1.1k 收藏
点赞数
分类专栏： ui 组件库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32265719/article/details/83613004
版权
ui 组件库 专栏收录该内容
13 篇文章 0 订阅 ¥19.90 ¥99.00
订阅专栏
  • opacity  filter
  • rgb(r,g,b) rgba(r,g,b,a)


1.rgba(r,g,b,a);


R：红色值:0-255 | 百分数
G：绿色值:0-255 | 百分数
B：蓝色值:0-255 | 百分数
A：Alpha透明度:0~1

 


2.opcaity

opacity: 0-1|inherit
filter:Alpha(opacity=50) --IE8-

3.常用

       /*子元素不透明*/
        .alpha_self{
            background-color: rgba(255,0,0,.5);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC0d53bc, endColorstr=#CC0d53bc);
        }
        /*子元素也透明*/
        .alpha_all{
            opacity:.8;
            filter:Alpha(opacity=80) /*--IE8-*/
        } 

 

<!DOCTYPE html>
<html>
<head>
	<title>opacity filter rgba</title>
	<meta charset="utf-8">
	<style>
		/*常用*/
		.box{
			width: 200px;
			height: 200px;
			background-color: #f00;
			opacity: .5;
			filter:Alpha(opacity=50) /*--IE8-*/
		}
		.box p{
			width: 150px;
			height: 150px;
			background: rgb(0,255,0)
		}
	</style>
</head>
<body>
	<div class="box">
		<p></p>
	</div>
</body>
</html>

 

良言SE
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
CSS rgb颜色产生原理 & 颜色对照表
ssisse的博客
05-07 1万+
本文转自：http://www.cnblogs.com/iteakey/articles/3016093.html HTML CSS颜色对照表 FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000 #FFB7DD #FF88C2 #FF44AA #FF0088 #C10066 #A2
color:rgba(red,green,blue,alpha)和background-color:rgba(r,g,b,a)
若先设计
09-18 3397
div style="background-color:rgba(10,100,100,0.5); border-radius:10px;width:100px; height:100px;">               p style="color:rgba(245,8,26,1);">aaap>               p style="color:rgba(245,8,26,0
CSS中设置透明度的2个属性：opacity，RGBA以及它们的区别
最新发布
u013179804的博客
04-26 1755
透明度在网页设计中扮演着重要的角色，透明度的合理运用可以提升网页设计的美感和功能性，增强用户体验，突出重点内容，同时也为设计师提供了更多的创作空间和可能性。那我们一起来看看吧。
背景图属性
weixin_41534129的博客
03-01 2791
.引入背景图片:background-image:url(); png支持背景透明，jpg不支持背景透明。 设置背景图片大小：background-size 6.背景图片的显示原则 a.容器尺寸等于图片尺寸，背景图片正好显示在容器中； b.容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素； c.容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图。 补充：网页上有两种图片形式：插入图片、背景图； 插入图片：属于网页内容，也就是结构。 背景图：属于网页的表现，背景图上可以显示文字、
RGBA实现背景颜色透明
hsliwei的专栏
09-27 4万+
所谓RGBA颜色，顾名思意就是R+G+B+A的颜色，再具体点就是RED+GREEN+BLUE+ALPHA的颜色，小写一下就是red+green+blue+alpha的颜色，翻译一下就是红+绿+蓝+Alpha透明的颜色。 RGBA颜色归为CSS3属性，其余RGB的区别在于多了个A
CSS3 颜色值RGBA表示方式
hsany330的专栏
03-17 4813
说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51 说明： RGBA(R,G,B,A) 取值： R：红色值。正整数 | 百分数G：绿色值。正整数 | 百分数B：蓝色值。正整数 | 百分数A：Alpha透明度。取值0~1之间。 说明：
【IE9/8/7/6/5】RGBA（background-color: rgba(R, G, B, A);）背景透明兼容性（含“条件注释判断浏览器版本”介绍与例子）
iuukai
02-04 438
关于RGBA的兼容，我百度过后，整理如下（真正的兼容方法在最下面） 在不兼容情况下 RGBA的属性，对于IE8以下是无效的： 所以，下面开始介绍各种兼容方法 一、添加IE的filter属性：（兼容IE8以及以下版本，却不兼容IE9） filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7Fff0000, ...
CSS中设置透明度
weixin_43755513的博客
07-27 456
CSS中设置透明度 1.使用rgba r:红色值。 值可以是正整数或百分数 g:绿色值。 值可以是正整数或百分数 b:蓝色值。 值可以是正整数或百分数 a:Alpha透明度。取值0-1之间 rgba使背景透明，背景上面的字体不会透明。 rgba在CSS3中才出现，低版本浏览器不支持， 2.opacity 值是0-1 例如：opacity：0.5； IE不兼容 opacity不仅会使背景透明...
ARGB与RGB、RGBA的区别
caption_deng的博客
08-30 5万+
ARGB 是一种色彩模式，也就是RGB色彩模式附加上Alpha（透明度）通道，常见于32位位图的存储结构。RGB 色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。RGBA 是代表Red（红色） Gree
CSS3背景详解
素描本里的男子的博客
05-25 178
一、rgba模式 语法：background:rgba(r,g,b,a); a代表透明度，取值范围0~1 eg: background:rgba(255,255,255,0.5); ★rgba与opacity的区别 rgba是给背景添加一定的透明度，容器中的文本或图片不会跟随透明 opacity是给整个容器添加一定的透明度，文本和图片会跟随透明 扩展：hsla模式 语法：background...
CSS设置背景颜色透明
热门推荐
weixin_45832482的博客
12-01 7万+
CSS设置背景颜色透明 将背景颜色设置为透明，两种方法： 方法一：通过background-color和opacity来设置 opacity属性参数的不透明度是以数字表示的，从0.0到1.0，完全透明是0.0，完全不透明是1.0，数字越大代表元素越不透明。 <div class="box01"> <p>今天星期三</p> </div> <div class="box02"> <p>和上面盒子对比</p
透明-----css的filter，opacity与css3的background-color: rgba
在坑中上爬，在打击中成长
03-17 5538
先从问题出发： 现象： 今天在项目中发现一个在IE9下的bug，现象是IE9下背景为不透明，而在IE8，IE10以及firefox，chrome下都是正常的，如下图：     IE9的效果，背景为纯白色， IE8，IE10，firefox，chrome的透明效果 调查过程： 1.查看代码： css中对li标签设置的是 filter:progid:DXImage
Pygame详解（一）：Color类
来自江南的你的博客
01-05 1万+
class pygame.Color Pygame 中用于描述颜色的对象。 Color(name) -&gt; Color Color(r, g, b, a) -&gt; Color Color(rgbvalue) -&gt; Color 方法 &amp; 属性 pygame.Color.r  —  获取或设置 Color 对象的红色值 pygame.Color.g  —  获取或设...
background:rgba（r,g,b,opacity）
qq_39579242的博客
08-28 2016
background:rgba（r,g,b,opacity）是设置为半透明的背景色，ie兼容性不是很好 一定程度上解决，节点里面的元素不透明，单单是背景色透明了 布局代码如下： &lt;div class="masked"&gt; &lt;img src="images/intel.web.368.207.1.jpg" alt="" class="img-responsi...
background:rgba()
Clownfishl的博客
03-12 2万+
RGBA
设置background-color颜色，并且设置 opacity时，背景色覆盖字，把background-color的颜色改成rgb的样式。
why_315的博客
09-08 2854
设置background-color颜色，并且设置 opacity时，背景色覆盖字，把background-color的颜色改成rgb的样式。
background:rgba和opacity的区别
SSFF12345的博客
06-23 1941
先来简单看看RGBA： 语法 rgba(r,g,b,a) 取值说明 R：红色值。正整数 | 百分数G：绿色值。正整数 | 百分数B：蓝色值。正整数 | 百分数A：Alpha透明度。取值0~1之间。正整数为十进制0~255之间的任意值，百分数为0%~100%之间的任意值。 RGBA是在R（Red）G（Green）B（Blue）模式上增加了alpha通道，alpha通道是不透明度，...
opacity和rgba()区别
少油少盐不要辣
04-10 563
1.opacity，无继承特性。但仍会导致应用该属性的元素内的所有内容具有透明度，包括文字。因此，会通过该元素看到底下的文字。 2.rgba()，应用该属性的元素，该元素内的文字不会有透明度，不能透过文字看到在该元素底下的文字。仅仅是该元素的背景有透明度了。 ...
背包问题
CUCUC1的博客
11-14 331
1､问题描述:   给N件物品和一个容量为C的包，每件的价值和重量分别为v[i]和w[i]且每件物品的数量为num[i] ,问怎么拿可以使得包中物品的价值最大 其实这个问题和之前的01背包和完全背包比较类似，所以如果没有上面两个基础的话，可以先去看下01背包和完全背包。 2､重复背包dp状态和过程 1､先说下未经优化的最朴素的dp过程  我们只需要仿照完全背包的过程就可以，只不过第三层循环 是每件物品的数量所以我们可以得到状态转移方程 ...
css 背景效果_css透明度怎么设置？三种css图片透明度的设置方法
05-31
要设置 CSS 中的背景透明度，可以使用 rgba 格式的颜色值，其中 a 表示 alpha 值，即透明度，取值范围为 0（完全透明）到 1（完全不透明）。例如： ```css background-color: rgba(255, 255, 255, 0.5); /* 设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值