Community Learn Tools Library Leisure

English

Home > Web Front-end > HTML Tutorial > 使用css3背景渐变中的透明度来设置不同颜色的背景渐变_html/css_WEB-ITnose

使用css3背景渐变中的透明度来设置不同颜色的背景渐变_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:20:18

Original

2498 people have browsed it

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。rgba()后面的百分比表示位置。

具体代码：

background: -webkit-linear-gradient(top, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.2)75%, rgba(255,255,255,0)98%);/* Safari、Chrome */background: -o-linear-gradient(bottom, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.2)75%, rgba(255,255,255,0)98%);/* Opera */background: -moz-linear-gradient(bottom, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.2)75%, rgba(255,255,255,0)98%);/* Firefox */background: linear-gradient(to bottom, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.2)75%, rgba(255,255,255,0)98%); /* 标准的语法（必须放在最后） */

Copy after login

注意：Internet Explorer 9 及之前的版本不支持渐变。

Related labels：

使用css3背景渐变中的透明度来设置不同颜色的背景渐变

source：php.cn

Previous article：CSS彻底研究(3)-浮动,定位_html/css_WEB-ITnose Next article：史上最全前端面试题(含答案)_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn