还是要请出东篱来演示背景渐变的方法
<style type="text/css">.dongli {
width:100%; height:460px; padding:10px;
background:url('https://pic.imgdb.cn/item/61bf23982ab3f51d91a0b99d.gif') no-repeat right bottom, linear-gradient(300deg,coral,red,orange,blue,yellow,pink,green);
}
</style>
<div class="dongli"></div> 本帖最后由 马黑黑 于 2022-1-2 00:40 编辑
gradient渐变是基于图像而设计的，所以 background 加入图像没有问题，关键是语法规范问题。先看代码：
<style type="text/css">
.dongli {
width:100%; height:460px; padding:10px;
background:url('https://pic.imgdb.cn/item/61bf23982ab3f51d91a0b99d.gif') no-repeat right bottom, linear-gradient(300deg,coral,red,orange,blue,yellow,pink,green);
}
</style>
<div class="dongli"></div>
观察蓝色那一句，它的格式如下：
background: 背景图片代码, 渐变代码
特别注意：图片代码结束后要有小角逗号与渐变代码隔开！
本例用了 linear-gradient() 线性渐变函数，它最简单的用法语句为：
background:linear-gradient(颜色1,颜色2,...,颜色n);
颜色至少要两个。至于其他参数，将另外开帖专门介绍。
还以为渐变就是前一贴的圆形渲染，原来也可以线形的{:4_173:} 这个好像图片在渐变的前面，能让渐变去改变图片颜色么？ 黑黑又发技术贴，真棒。辛苦了。还是等着队长来加精吧。 红影 发表于 2022-1-2 10:09
还以为渐变就是前一贴的圆形渲染，原来也可以线形的
背景渐变目前有线性渐变和径向渐变两种。线性的相对简单，稍后再讲。
国内正统的HTML5和CSS官网都不介绍这个渐变，大家去看看CSS背景部分，只介绍了颜色和图片。可能的原因是维护问题，毕竟背景渐变是后来加入的。 本帖最后由 马黑黑 于 2022-1-2 11:02 编辑
红影 发表于 2022-1-2 10:09
这个好像图片在渐变的前面，能让渐变去改变图片颜色么？
背景图有自己的修饰，gradient渐变道理上也能对它有一定影响 红影 发表于 2022-1-2 10:10
黑黑又发技术贴，真棒。辛苦了。还是等着队长来加精吧。
哦，精华与否是次要的，关键是它能否帮助到大家 好教程，又学到一招了。谢谢老黑！{:4_199:} 加林森 发表于 2022-1-2 11:26
好教程，又学到一招了。谢谢老黑！
{:4_190:} 马黑黑 发表于 2022-1-2 11:33
{:4_191:} 加林森 发表于 2022-1-2 11:40
中午好 马黑黑 发表于 2022-1-2 11:47
中午好
中午好！你喝{:4_191:}我喝{:4_180:} 队长不午休么 红影 发表于 2022-1-2 10:10
黑黑又发技术贴，真棒。辛苦了。还是等着队长来加精吧。
亲爱的，感觉黑黑的教程要建个文件夹归类置顶，你看看怎么弄，我几天没有好好看，一下子就找不到连贯的顺序了 马黑黑 发表于 2022-1-2 00:36
gradient渐变是基于图像而设计的，所以 background 加入图像没有问题，关键是语法规范问题。先看代码：
...
这个又用到我不会的那个颜色代码 黑黑 这个色码可以换国内通用的那种吗 小辣椒 发表于 2022-1-2 12:40
黑黑 这个色码可以换国内通用的那种吗
你说的国内通用，大概是 HTML 里的 style 语句吧。这个可以。用上 @keyframes 的不行。 小辣椒 发表于 2022-1-2 12:39
这个又用到我不会的那个颜色代码
这个就是背景渐变，给两个以上颜色就能套用，颜色可以有多个 破黑黑，净瞎搞，这五颜六色的，把俺的摇椅整没了吧？{:5_158:}