码迷,mamicode.com
首页 > 其他好文 > 详细

渐变-从透明到红色

时间:2019-06-06 12:11:06      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:ima   inter   语法   doctype   htm   set   div   explore   style   

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#grad1 {
    height: 200px;

    background: linear-gradient(to left, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法(必须放在最后) */
}
#grad2 {
   height: 200px;

   background: linear-gradient(to top, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法(必须放在最后) */
}


body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}
</style>
</head>
<body>

<h3>线性渐变 - 透明度</h3>
<p>为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。</p>

<div id="grad1">从右边向左边透明变成红色</div>
<div id="grad2">从底部到顶部透明变成红色</div>

<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

渐变-从透明到红色

标签:ima   inter   语法   doctype   htm   set   div   explore   style   

原文地址:https://www.cnblogs.com/divtab/p/10984071.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!