【踩坑】 gradient 渐层背景要写在哪里?

起初刚学到设定颜色时，都是使用background-color来帮物件或是背景上色
於是在学到 gradient 时，超级兴奋٩(ˊᗜˋ )و
竟然可以用这麽美的效果!!
兴致冲冲的写了

/*以下错误示范，好孩子不要学*/
background-color: linear-gradient(0deg, #f00 0%, #00f 100%);

嘛...(☉д⊙)..阿那ㄟ谋蒿???
看了一下配色网站提供的程序码 https://cssgradient.io/
喔~原来是background

background: linear-gradient(0deg, #f00 0%, #00f 100%);

耶~成功了!!! < (￣︶￣)>

不求甚解、不知道有MDN、W3C网站的萌新马上就遇到另一个问题
我想在渐层背景上面放图片呀
於是又写下了

/*错误示范*/
/*好孩子不要学*/
background: linear-gradient(0deg, #f00 0%, #00f 100%);
background-image: url(https://picsum.photos/id/237/200/300);
background-repeat: no-repeat;

嘛...(☉д⊙)...为什麽只剩图片，渐层去哪里了?哪里不对呀...

困惑的新手在原地转了很久的圈

现在想起这件事都想往自己头上巴下去(笑)

首先在MDN网站上面说

The CSS data type is a special type of that consists of a progressive transition between two or more colors.

意思就是：gradient 属於 image 的一种!!
应该使用的是background-image 而不是background-color

至於为什麽用background可以正常显示呢
那是因为background是缩写的意思
他涵盖了以下的各种background属性

• background-color
• background-image
• background-attachment
• background-repeat
• background-poition
• background-size

使用方法请拜读这一篇-《Background - 金鱼都能懂的CSS必学属性》

里面非常详尽!我的启蒙都是靠金鱼XD
相信读了就开窍了~~
那这边就不再多做说明罗!

因此当我用background设定了渐层，又写了background-image插入图片时
自然後面写的background-image会盖过上面的background渐层

多重图片设定

那麽像刚刚的情况要怎麽做出来呢?
这时候就可以用逗点分开图片，一次进行多张图片的设定

 background-image: 
    url(https://picsum.photos/id/237/200/300),
    linear-gradient(0deg, #f00 0%, #00f 100%);
    
 background-repeat: no-repeat;

图片的层次并没有限制，可以叠很多张~
写在越後面的会叠在越下面
如图所示

做照片的遮罩效果

除了单纯做背景之外，渐层还有个很好用的地方
他可以对图片做出遮罩的效果呀!
利用transparent透明+黑色下去渐层
这样子滑鼠移动到图片上也可以有不一样的感觉啦~
codepen实作