html边框白色实线rgba,CSS3 RGBA 属性高级用法

article/2025/10/1 8:19:15

这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持。RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解释如下:

/* 基本语法 */em { color: Rgba(red,green,blue,opacity) }/* 举例 */em { color: rgba(255,0,0,1) } /* 红色,不透明 */em { color: rgba(100%,0%,0%,1) } /* 同上 */

在现实中,使用三个1~255的十进制数值去定义一个颜色比用百分比更加准确,下面是几个颜色的RGB数值,大家在使用的时候只需要把00~FF的16进制数值换算成十进制就行了。

35744221_1.gif

如何使用RGBA属性

RGBA的强大之处在于,通过对透明度的定义和不同层的颜色混合可以呈现出更多的颜色,就像颜料的混合一样。举一个例子,我们先为页面设置一个背景图片,接着为页面里的H1里的内容设置一个颜色,例如:

h1 {color: rgb(0, 0, 0);background-color: rgb(255, 255, 255);}

效果如下:

35744221_2.gif

这里可以看到H1并没有透明效果

但如果我没对H1设置一个整体的透明度(opacity属性)的话,效果会变成怎样呢?

h1 {color: rgb(0, 0, 0);background-color: rgb(255, 255, 255);opacity: 0.5;}

35744221_3.gif

在这里我们看到的效果是整个H1包括文字都呈现50%的透明度。可是文字透明是影响阅读的,我们用RGBA属性单独设置H1的背景色试试。

h1 {color: rgb(0, 0, 0);background-color: rgba(255, 255, 255, 0.5);}

35744221_4.gif

这是我们可以看到H1的背景成50%透明的白色,但里面的文字还是不透明的黑色。当然,你也可以只让H1里的文字透明。

h1 {color: rgba(0, 0, 0, 0.5);background-color: rgb(255, 255, 255);}

35744221_5.gif

只让文字透明,可以用来创建剪纸效果。

更多用法

在任何需要设置颜色的地方都可以使用RGBA,例如:

div {color: rgb(0, 0, 0);background-color: rgb(255, 255, 255);border: 10px solid rgba(255, 255, 255, 0.3);}

35744221_6.png

为所有div设置透明度为30%线宽为10px的白色实线边界。

div {color: rgba(255, 255, 255, 0.8);background-color: rgba(142, 213, 87, 0.3);}div:hover {color: rgba(255, 255, 255, 1);background-color: rgba(142, 213,87, 0.6);}

35744221_7.png

鼠标滑过改变透明度。

另外如果和JavaScript配合的话,RGBA属性可以创造出更加炫目的效果。

改变你的CSS编写习惯

在以上的例子中你可以看到作者一直在使用rgb()去指定颜色,而不使用传统的#xxx形式的十六进制表示方法。这是一个为CSS3的RGBA属性准备的写法,用rgb()指定颜色可以理解为rgba()不透明,但两者的差别非常小,这会对将来升级到rgba()带来很大的方便。

兼容所有浏览器

虽然目前主流浏览器的最新版本都已经支持RGBA属性,但我们还必须照顾使用旧版浏览器的用户,因此在某些地方我们用老方法会保险一些。方法也有好几种,大家按需选择。

1.低版本不使用RGBA属性

虽然这会影响在低版本浏览器里的效果,但这是最简单的方法,也是最保险的方法,具体操作如下:

h1 {color: rgb(127, 127, 127);color: rgba(0, 0, 0, 0.5);}

先设置rgb颜色在设置rgba颜色,这样不支持rgba属性的浏览器只会显示rgb颜色,而支持rgba的浏览器因为重定义的作用会显示rgba颜色。

2.使用透明的PNG图片做背景

PNG格式的优点在于图片里的透明特性可以在网页里呈现出来,这里就用到了这个特点。

h1 {background: transparent url(black50.png);background: rgba(0, 0, 0, 0.5) none;}

通过透明度为50%的PNG背景达到了和rgba一样的效果。

3.IE hack

对IE6和IE7可以用IE的私用属性来解决,可达到部分和rgba一样的效果。

h1 {filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#80000000', EndColorStr='#80000000');}

我们需要留意的是StartColorStr和EndColorStr的值,前两位是十六进制的透明度,后面六位是十六进制的颜色。


http://chatgpt.dhexx.cn/article/NAgI5ODQ.shtml

相关文章

CSS中RGBA和渐变色

颜色值RGBA 我们熟悉的rgb颜色标准,是由r(red)、g(green)、b(blue)三种颜色叠加变化形成各种颜色 取值0-255,或0-100% rgba就是在rgb基础上增加了alpha不透明度参数 .demo {width…

Drools入门介绍

Drools 介绍 是一个业务规则管理系统,具有基于前向链和后向链推理的规则引擎,允许对业务规则和复杂事件处理进行快速可靠的评估。规则引擎也是创建专家系统的基本构建块,在人工智能中,专家系统是模拟人类专家决策能力的计算机系统…

Drools入门系列

Drools入门系列(一)HelloWorldDrools入门系列(二)HelloWorld详解之Sample.drlDrools入门系列(三)HelloWorld详解之kmodule.xmlDrools入门系列(四)HelloWorld详解之JUnit Test类Drool…

初探Drools

文章目录 背景一、Drools基本概念1.1 规则引擎1.2 Drools简介 二、Drools基本用法2.1 规则文件2.2 配置文件2.3 数据驱动 三、Drools进阶用法3.1 DSL语言3.2 其他 四、Workbench五、android端集成六、类比其他Java规则引擎七、应用场景与展望 背景 笔者最近在研究、使用Java规…

Drools学习01

Drools学习 1.springbootdroolsstringTemplate 1.1主要依赖导入 <!--使用drools的主要依赖--> <dependency><groupId>org.drools</groupId><artifactId>drools-compiler</artifactId><version>7.73.0.Final</version> <…

Drools基础语法

Drools基础语法 规则文件构成 在使用Drools时非常重要的一个工作就是编写规则文件&#xff0c;通常规则文件的后缀为.drl。 drl是Drools Rule Language的缩写。在规则文件中编写具体的规则内容。 一套完整的规则文件内容构成如下&#xff1a; Drools支持的规则文件&#xff…

【Drools一】值得打工人学习的规则引擎Drools

本文主要对Drools的使用业务场景做简单介绍。 规则引擎 规则引擎&#xff1a;全称为业务规则管理系统&#xff0c;英文名为BRMS(即Business Rule Management System)。规则引擎的主要思想是将应用程序中的业务决策部分分离出来&#xff0c;并使用预定义的语义模块编写业务决策…

Drools 入门例子

本人参照drools-4.0.7-examples修改&#xff0c;可以到这个网址去下载&#xff1a;http://www.jboss.org/drools/downloads.html 1:下载4.0版eclipse &#xff1a; eclipse-java-ganymede-win32.zip并解压到D:/eclipse-java-ganymede-win32不需安装 2:下载drools插件 http://ww…

Drools

Drools入门系列&#xff08;一&#xff09;HelloWorldDrools入门系列&#xff08;二&#xff09;HelloWorld详解之Sample.drlDrools入门系列&#xff08;三&#xff09;HelloWorld详解之kmodule.xmlDrools入门系列&#xff08;四&#xff09;HelloWorld详解之JUnit Test类Drool…

规则引擎 Drools

规则引擎 Drools 文章目录 规则引擎 Drools1. 问题引出2. 规则引擎概述2.1 什么是规则引擎2.2 使用规则引擎的优势2.3 规则引擎应用场景2.4 Drools介绍 3.Drools入门案例3.1 业务场景说明3.2 开发实现3.3 小结3.3.1 规则引擎构成3.3.2 相关概念说明3.3.3 规则引擎执行过程3.3.4…

drools学习

drools使用和设置 1.概述举个例子 2.结合maven引入1.引入maven2.创建kmoudule.xml文件3如有需要,安装drools的插件4编写drl规则文件5准备用于测试的po类6编写drools的java接口 3.基本规则 4.组合语法 1.概述 drools是一个规则引擎,什么是规则引擎?就是能够自动将决策树转化为…

drools详解

1、基本的概念 请参考这个链接&#xff0c;差不多的语法感觉都介绍了 drools-api的基本语法链接 2、如何将drl文件配置在数据库中&#xff0c;实现动态加载&#xff1a; package com.neo.drools;import com.neo.drools.model.Message; import org.kie.api.io.ResourceType; i…

Drools基本介绍,入门案例,基本语法

目录 经典需求与场景 需求 传统做法-if 传统做法-策略 问题&#xff1f; 规则引擎 概念 起源 原理--基于 rete 算法的规则引擎 规则引擎应用场景 Drools 介绍 消费赠送积分案例 第一步&#xff1a; 创建工程&#xff0c;引入jar 创建 drools 自动配置类 订单实体…

Drools 简介

序 现实生活中&#xff0c;规则无处不在。对于某些企业级应用&#xff0c;诸如欺诈检测软件&#xff0c;购物车&#xff0c;活动监视器&#xff0c;信用和保密应用之类的系统&#xff0c;经常会有大量的、错综复杂的业务规则配置&#xff0c;而且随着企业管理者的决策变化&…

drools 介绍

1 .场景 1.1需求 商城系统消费赠送积分 100元以下, 不加分 100元-500元 加100分 500元-1000元 加500分 1000元 以上 加1000分 ...... 1.2传统做法 1.2.1 if...else if (order.getAmout() < 100){ order.setScore(0); addScore(order); }else if(order.getAmo…

计组——定点数原码反码补码移码以及它们之间的转换

原码 用尾数表示真值的绝对值&#xff0c;符号位“0/1”对应“正/负” 若机器字长n1位&#xff0c;原码整数的表示范围&#xff1a; − ( 2 n − 1 ) ≤ x ≤ 2 n − 1 {\color{Red} -(2^{n}-1)\leq x\leq 2^{n}-1} −(2n−1)≤x≤2n−1&#xff08;关于原点对称&#xff09;…

数据的表示:原码、反码、补码、移码以及浮点数的运算

前言 复习到数据表示方面相关的知识&#xff0c;所以在这里做一下记录&#xff0c;也方便大家参考。 什么是 R 进制 对于 R 机制&#xff0c;如果要实现与十进制的转换&#xff0c;则使用 按权展开法&#xff0c;其具体操作为&#xff1a; 将 R 进制数的每一位数值用 R k R…

五分钟理解原码补码反码和移码

这是计算机的基本知识了&#xff0c;一定要好好学。哈哈废话不多说&#xff0c;直接进入正题吧。计算机中有无符号数和有符号数两大类。 有符号数就是正负数&#xff0c;在计算机中正好用0和1分别去代表正和负。(ps:好多人不理解机器数和真值&#xff0c;机器数就是把符号数字…

原码、反码、补码、移码的表示

若字长n为8时&#xff0c;那么45的二进制表示0 0101101 &#xff0c;若数值X 1.原码 [X]原&#xff0c;在二进制数值中&#xff0c;正数保持不变&#xff0c;负数符号位置1. 2.反码 [X]反&#xff0c;的正数保持不变 &#xff0c; 负数对数值的绝对值每一位按位求反 3.补码…

关于补码移码各自和原码的联系、来历、功能及I EEE754标准中移码范围问题

最近在学习计算机组成原理时,遇到一些问题,记录在此。 如果你对下面这段话有疑惑或者兴趣&#xff0c;我或许能说点什么你感兴趣的。 真值-128的补码&#xff1a;1000 0000&#xff0c;这个补码本身表示的二进制数&#xff08;无符号&#xff09;是128&#xff0c;其对应着真…