背景颜色| 学习笔记

简介: 快速学习背景颜色。

开发者学堂课程【零基础学前端 HTML+CSS 背景颜色】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/398/detail/5147


背景颜色

 

内容介绍

一、背景颜色介绍

二、CSS 背景颜色介绍及示例操作

 

一、背景颜色介绍

1.颜色

十六进制色 bacikground-color:#0000ff; //十六进制的值

RGB 颜色:rgb(255,0,0);  //红绿蓝三种颜色

RGBA 颜色:rgba(255,0,0,0.5);  //增加的属性

HSL 颜色:hsl(120,65%,75%);

HSLA 颜色:hsla(120,65%,75%,0.3);

RGBA 颜色值得到一下浏览器支持:IE9,Firefox3+,Chrome、Safari以及Opera 10+

RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道-它规定了对象的不透明度

RGBA 颜色值规定:rgba(red,green,blue,alpha) alpha 参数是介于0.0(完全透明)与1.0(完全不透明)的数字。

新增加的 RGBA 颜色设置,可以增加一个 alpha 通道,数值是0-1,0代表透明,1代表不透明。

 

二、CSS 背景颜色介绍及示例操作

示例代码:

#color{

width:500px;

height:500px;

background-color:rgb(255,0,0);

} 

#color2{

width:500px;

height:500px;

background-color:rgb(255,0,0.5);

}

<div id=”color”>

</div>

呈现效果如下:

image.png

//会出现透明的图像,是 RGBA 的通道的作用,可以根据效果去制定,比如设置一个图层

相关文章
|
1月前
边框样式
边框样式。
28 5
|
3月前
设置表格的背景颜色和背景图片
设置表格的背景颜色和背景图片
34 10
|
7月前
|
前端开发
背景颜色
背景颜色。
257 6
|
前端开发 IDE 开发工具
「趣学前端」为什么有的页面背景颜色是渐变的
用技术实现梦想,用梦想打开创意之门。为了给不懂技术的朋友讲解日常开发中怎么实现网页的效果,我准备出一个系列。
162 1
|
Web App开发 前端开发 搜索推荐
|
前端开发 开发者
|
前端开发 开发者
|
前端开发
CSS学习笔记 05、边框、圆角与盒子阴影(二)
CSS学习笔记 05、边框、圆角与盒子阴影(二)
CSS学习笔记 05、边框、圆角与盒子阴影(二)
|
前端开发
CSS学习笔记 05、边框、圆角与盒子阴影(一)
CSS学习笔记 05、边框、圆角与盒子阴影(一)
CSS学习笔记 05、边框、圆角与盒子阴影(一)