还是要请出东篱来演示背景渐变的方法

马黑黑

马黑黑

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);

颜色至少要两个。至于其他参数，将另外开帖专门介绍。

红影

还以为渐变就是前一贴的圆形渲染，原来也可以线形的

红影

这个好像图片在渐变的前面，能让渐变去改变图片颜色么？

红影

黑黑又发技术贴，真棒。辛苦了。还是等着队长来加精吧。

马黑黑

红影 发表于 2022-1-2 10:09
还以为渐变就是前一贴的圆形渲染，原来也可以线形的

背景渐变目前有线性渐变和径向渐变两种。线性的相对简单，稍后再讲。

国内正统的HTML5和CSS官网都不介绍这个渐变，大家去看看CSS背景部分，只介绍了颜色和图片。可能的原因是维护问题，毕竟背景渐变是后来加入的。

马黑黑

红影 发表于 2022-1-2 10:09
这个好像图片在渐变的前面，能让渐变去改变图片颜色么？

背景图有自己的修饰，gradient渐变道理上也能对它有一定影响

马黑黑

红影 发表于 2022-1-2 10:10
黑黑又发技术贴，真棒。辛苦了。还是等着队长来加精吧。

哦，精华与否是次要的，关键是它能否帮助到大家

加林森

好教程，又学到一招了。谢谢老黑！

马黑黑

加林森 发表于 2022-1-2 11:26
好教程，又学到一招了。谢谢老黑！

加林森

马黑黑 发表于 2022-1-2 11:33

马黑黑

加林森 发表于 2022-1-2 11:40

中午好

加林森

马黑黑 发表于 2022-1-2 11:47
中午好

中午好！你喝我喝

马黑黑

队长不午休么

小辣椒

红影 发表于 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
这个又用到我不会的那个颜色代码

这个就是背景渐变，给两个以上颜色就能套用，颜色可以有多个

东篱闲人

破黑黑，净瞎搞，这五颜六色的，把俺的摇椅整没了吧？