艾雨博客

Appearance

css透明度之opacity与rgba

在前端开发中，写css的时候要设置透明度有两种方法

  1. opacity
  2. rgba

这两个方法在一定程度上没有区别，但又有一点点区别

opacity ​

opacity ==> 不透明度

opacity 属性指定了一个元素的不透明度。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。

当 opacity 属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的 opacity 属性值。

取值范围 ​

取值范围是0到1之间的数字，0表示完全透明，1代表不透明

语法 ​

css
.box {
    opacity: 0.5;
}

兼容性 ​

兼容IE9+、Firefox 2+、Chrome、Safari 以及 Opera 10+。

opacity兼容性

rgba ​

CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。

RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 – 它规定了对象的不透明度。

基础语法 ​

CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。

RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 – 它规定了对象的不透明度。

css
.box {
    background-color: rgba(255, 0, 0, 0.5);
}

兼容性 ​

兼容浏览器IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

rgba兼容性

区别 ​

rgba和opacity都能设置透明效果，他们主要有以下区别

  1. opacity设置后会对他子级的所有内容设置透明度
  2. rgba只会对颜色或背景色造成影响，并且子级不会继承透明效果
  3. rgba可以设置在background-color，color，border-color，text-shadow，box-shadow

例如给一个盒子设置opacity为0.3，如果那个盒子下面有输入字的话，那么字也会变透明，rgba则不会

css
div {
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 0.3;
}

css透明度之opacity与rgba插图2

css
div {
    width: 100px;
    height: 100px;
    background-color: rgba(255, 0, 0, 0.3);
    /* opacity: 0.3; */
}

css透明度之opacity与rgba插图3

示例 ​

opacity

css透明度之opacity与rgba插图4

rgba

css透明度之opacity与rgba插图5

演示demo ​

css透明度之opacity与rgba插图6

demo源码

html
<div class="op-wrapper">
  <h2>opacity</h2>
  <div class="box">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
  </div>
</div>
<div class="rgb-wrapper">
  <h2>rgba</h2>
  <div class="box">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
  </div>
</div>
css
* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
}
.box {
  position: relative;
  margin-top: 300px;
  width: 500px;
  transform-style: preserve-3d;
  animation: xuanzhuan 10s infinite;
}
.item1,
.item2,
.item3,
.item4,
.item5,
.item6 {
  position: absolute;
  width: 100px;
  height: 100px;
  font-size: 30px;
  color: #000;
  line-height: 100px;
  text-align: center;
}
.item1 {
  background-color: red;
}
.item2 {
  background-color: yellow;
  transform: rotateX(90deg) translateZ(50px) translateY(-50px);
}
.item3 {
  background-color: blue;
  transform: rotateX(-90deg) translateZ(50px) translateY(50px);
}
.item4 {
  background-color: green;
  transform: rotateY(-90deg) translateZ(50px) translateX(-50px);
}
.item5 {
  background-color: lime;
  transform: rotateY(90deg) translateZ(50px) translateX(50px);
}
.item6 {
  background-color: skyblue;
  transform: translateZ(-100px);
}
.op-wrapper {
  opacity: 0.5;
}

.item1 {
  background-color: rgba(255, 0, 0, 0.5);
}
.item2 {
  background-color: rgba(255, 255, 0, 0.5);
  transform: rotateX(90deg) translateZ(50px) translateY(-50px);
}
.item3 {
  background-color: rgba(0, 0, 255, 0.5);
  transform: rotateX(-90deg) translateZ(50px) translateY(50px);
}
.item4 {
  background-color: rgba(0, 128, 0, 0.5);
  transform: rotateY(-90deg) translateZ(50px) translateX(-50px);
}
.item5 {
  background-color: rgba(0, 255, 0, 0.5);
  transform: rotateY(90deg) translateZ(50px) translateX(50px);
}
.item6 {
  background-color: rgba(135, 206, 235, 0.5);
  transform: translateZ(-100px);
}
@keyframes xuanzhuan {
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

tips ​

目前rgba只有在支持这个属性的浏览器上使用，如果需要使用，请考虑这方面的显示差别。

艾雨博客微信公众号二维码
© 版权声明
文章版权归作者所有，未经允许请勿转载.
本站资源多数存于云盘，如有失效请邮件联系我.
本网站的文章部分内容可能来源于网络，如有侵权，请联系884684993#qq.com进行删除处理.