透明度 | 学习笔记

简介: 快速学习透明度。

开发者学堂课程【CSS 快速掌握透明度】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/611/detail/9212


透明度


内容介绍

一、透明度

 

一、透明度

CSS 透明度

只要是颜色,都可以用透明度

Rgba(红色,绿色,蓝色,透明度)

a:表示透明度的意思  透明度取值:0~1之间  0表示完全透明  1表示不透明

·背景颜色透明

Background-color:rgba(255,255,255,0.3)

·文件颜色透明

Coler:rgba(255,255,255,0.3)

·边框颜色透明

Border:1px soild rgba(255,255,255,0.5)

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<title>背景颜色透明度</title>

<style type=”text/css”>ground

{

Margin:0;

Padding:0;

}

.boxx{

Width:100px;

Height:100px;

Background:rgb(255,0,0,0.5);

Position:fixed;

}

</style>

</head>

<body>

<div class=”bos”></div>

</body>

</html>

2

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>文本颜色设置透明度</title>

<style type="text/css">

.box{

width:100px;

height:100px;

color:rgba(255,0,0,0.3);

border:10px solid rgba(0,0,0,0.4);

}

</style>

</head>

<body>

<div class="box">文本颜色设置透明度</div>

相关文章
|
4月前
一行代码获取rgba颜色色值的透明度
一行代码获取rgba颜色色值的透明度
|
前端开发 开发者
阴影 | 学习笔记
快速学习阴影
59 0
阴影 | 学习笔记
|
前端开发 开发者
颜色 | 学习笔记
快速学习颜色
64 0
颜色 | 学习笔记
常用颜色RGB、灰度值、取色值、透明度。
常用颜色RGB、灰度值、取色值、透明度。
492 0
|
前端开发 容器
阴影进阶,实现更加的立体的阴影效果!
阴影进阶,实现更加的立体的阴影效果!
358 0
阴影进阶,实现更加的立体的阴影效果!
SwiftUI—如何给图像视图添加边框、透明度和阴影
SwiftUI—如何给图像视图添加边框、透明度和阴影
699 0
SwiftUI—如何给图像视图添加边框、透明度和阴影
SwiftUI—使用角度渐变制作顺时针的扇形渐变颜色
SwiftUI—使用角度渐变制作顺时针的扇形渐变颜色
312 0
SwiftUI—使用角度渐变制作顺时针的扇形渐变颜色
SwiftUI—使用渐变提高视觉的冲击力:绘制线性渐变
SwiftUI—使用渐变提高视觉的冲击力:绘制线性渐变
198 0
SwiftUI—使用渐变提高视觉的冲击力:绘制线性渐变
UI之常用通过颜色值和透明度怎么得到最后的颜色值
UI之常用通过颜色值和透明度怎么得到最后的颜色值
134 0