html中div背景颜色渐变(透明 对角 附赠颜色查询对照表)
透明渐变效果图
源码
<style>#grad1 {<!--height: 100px;-->background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
<div id="grad1"></div>
不喜欢这个颜色的话,还有(
渐变灰蓝
)
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(16,33,106,1));
测试时请将被我注释掉的高恢复,自己使用的话,请随意设置你需要的高
使用角度:
如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)
rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。
对角渐变效果图
源码
<style>
#grad2 {<!--height: 100px;-->background-image: linear-gradient(80deg, #20B2AA, #1C86EE);
}
</style>
<div id="grad2" style="text-align:center;"></div>
附赠
参考详情教程
:https://www.runoob.com/css3/css3-gradients.html
渐变色设计思想
:https://www.cnblogs.com/GarsonZhang/p/10516700.html
万能的调色板
:https://www.114la.com/other/rgb.htm
推荐另一个博主的CSDN博文(纯萌新可以直接copy):https://blog.csdn.net/qq_42850073/article/details/90712034
html中div背景颜色渐变(透明 对角 附赠颜色查询对照表)相关推荐
- Android中设置背景线性渐变
我在drawable文件夹中新建一个xml文件 先上示例代码以及效果图 <?xml version="1.0" encoding="utf-8"?> ...
- IE7 中 div 背景透明的问题
<!DOCTYPE html> <html> <div style="filter:alpha(opacity:20);opacity:0.2;backgrou ...
- 微信小程序中自定义背景导航栏透明背景设置
首先确定好自己要在哪个页面中使用自定义头部导航栏样式 在该页面中找到xxx.json文件中添加上 "navigationStyle":''custom" 这样在页面中头部 ...
- android 图片颜色渐变动画,自定义View之颜色渐变折线图
今日科技快讯 近日,汽车之家宣布与湖南卫视达成独家战略合作.据悉,双方开辟了"台网互动"营销模式,将共同开展汽车广告业务,并联合推出品效合一的新型汽车类广告产品"芒果汽车 ...
- 用linq查询html中div个数,C#使用Linq to XML进行XPath查询
最近在用到HtmlAgliltyPack进行结点查询时,发现这里选择结点使用的是XPath.所以这里总结一下在C#中使用XPath查询XML的方式.习惯了用Linq,这里也是用的Linq to xml ...
- CSS权威指南(九)颜色、背景和渐变
文章目录 1.颜色 2.背景 3.渐变 4.盒子投影 1.颜色 CSS可以为任何元素设置前景色和背景色.一般来说,前景指元素的文本和元素四周的边框. (1)前景色 设置元素前景色的最基本方法是使 ...
- css背景渐变透明和方向
css背景颜色渐变透明 左到右 background-image: linear-gradient(to left, red, rgba(255, 0, 0, .1)); 右到左 background ...
- CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...
- H5:画布Canvas基础知识讲解(三)之文字、阴影、颜色渐变
上一节介绍了H5:画布Canvas基础知识讲解(二)之插入图像.像素级操作,接下来继续讲解H5:画布Canvas基础. 文字 虽然最近的WebKit版本和Firefox 3.1 nightly bui ...
- php如何在添加div的背景颜色_css3颜色渐变:css3如何实现背景颜色渐变?
为了开发网页的美观,css3背景颜色渐变是经常会用到的,那么,css3背景颜色渐变如何设置呢?本篇文章我们就来介绍关于css颜色渐变背景的设置方法. 我们要知道的是css3渐变有两种类型:css3线性 ...
最新文章
- 计算机专插本专业考哪些科目,2020年广东专插本要考什么?专插本考试科目有哪些?...
- 10种不要钱的护肤法则 - 生活至上,美容至尚!
- 在Windows XP Home如何安裝IIS?
- 2015年3月-前端开发月刊
- 127. Word Ladder 单词接龙
- 【无线电波】蓝牙Bluetooth来源 原理?有无辐射影响健康 是否安全!?
- Cmd Markdown 编辑阅读器
- C++继承详解:共有(public)继承,私有(private)继承,保护(protected)继承
- asp.net单一登录
- 一个经典的多线程同步问题
- Boot Hill 布特山
- android animation学习
- 带参数的RedirectToAction
- 看到一个RISC-V指令集的评论
- Linux日文教程,在Deepin/Ubuntu下安装fcitx-Anthy以输入日语(日文)
- 关于累加偶数奇数的c语言程序,c语言 在1-100之间,求所有奇数和偶数的个数和所有奇数和偶数的和(写到一个里面)...
- 从数据库导出数据到EXCEL换行的问题解决方法(即数据库字段太长自动换行)
- 语音专题第三讲,语言模型
- bugku--PHP代码审计-sha()函数比较绕过
- dubbo-admin0.3.0安装教程