CSS-背景色 background 半透明

想要实现背景色的半透明效果可以是将 background 的属性值设置为 rgba()

语法：

background: rgba(0, 0, 0, 0.5);

前三个值（红绿蓝）的范围为0到255之间的整数或者0%到100%之间的百分数；这些值描述了红绿蓝三原色在预期色彩中的量

最后一个参数是 alpha 透明度取值范围 0~1之间，0.5为半透明

rgba(255,255,255,0) 完全透明的白色
rgba(0,0,0,1) 完全不透明的黑色
rgba(0,0,0,0) 完全透明的黑色（无色）

背景半透明是指盒子背景半透明，盒子里面的内容不受影响；因为是CSS3 ，所以低于 ie9 的版本是不支持的

在实际开发中我们习惯把 0.5 的 0 省略掉这样写 background: rgba(0, 0, 0, .5);

CSS-背景色 background 半透明相关推荐

css 背景色渐变 background linear-gradient
css 背景色渐变 background linear-gradient background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0 ...
CSS 背景(background)+背景透明(CSS3)
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...
背景透明css样式,CSS 背景(background)+背景透明(CSS3)
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...
css鼠标点在文字上背景透明,CSS实现文字半透明显示在图片上方法(示例代码)
CSS实现文字半透明显示在图片上方法在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
CSS 背景色背景图片渐变背景 - 径向渐变 background-image:radial-gradient()
radial-gradient() 用来生成径向渐变的图片基础语法 background-image: radial-gradient(shape extent at positionX posit ...
CSS边框应用 - 半透明边框
相信你以前肯定尝试过 CSS 中的半透明颜色, 比如 rgba() 和 hsla().半透明颜色是 2009 年发生的一场重大变革. 从那以后, 我们终于可以在网页设计中使用它们了, 但是为了尝鲜还需 ...
css透明效果代码结构,用CSS实现背景半透明效果的方法实现_css
如何用css实现背景半透明效果?做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容.不过如果你只需求 ...
CSS背景background详解，background-position详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

CSS-背景色 background 半透明

CSS-背景色 background 半透明相关推荐

最新文章

热门文章