如何在我的 CSS 渐变上放置背景图像答案

【问题标题】：How to lay background image on top my CSS gradient如何在我的 CSS 渐变上放置背景图像
【发布时间】：2013-10-03 21:40:44
【问题描述】：

很难让我的背景图片叠加在我的 CSS 渐变之上。这就是我所拥有的，但是当我在手机上打开它时，图片位于渐变背景的后面。这正在移动设备、最新版本的 IOS 和 Android 上使用。

body {
background-size:cover;
background-image: linear-gradient(bottom, rgb(20,36,130) 44%, rgb(255,255,255) 67%, rgb(7,22,137) 26%), url(main_BG.png);
background-image: -o-linear-gradient(bottom, rgb(20,36,130) 44%, rgb(255,255,255) 67%, rgb(7,22,137) 26%), url(main_BG.png);
background-image: -moz-linear-gradient(bottom, rgb(20,36,130) 44%, rgb(255,255,255) 67%, rgb(7,22,137) 26%), url(main_BG.png);
background-image: -webkit-linear-gradient(bottom, rgb(20,36,130) 44%, rgb(255,255,255) 67%, rgb(7,22,137) 26%),url(main_BG.png);
background-image: -ms-linear-gradient(bottom, rgb(20,36,130) 44%, rgb(255,255,255) 67%, rgb(7,22,137) 26%),url(main_BG.png);
background-repeat:no-repeat, no-repeat;

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.44, rgb(20,36,130)),
    color-stop(0.67, rgb(255,255,255)),
    color-stop(0.26, rgb(7,22,137)),url(main_BG.png);
    );
}

【问题讨论】：

您能否在“jsfiddle.net”上添加代码或在工作网站上提供链接

标签： css background-image gradient

【解决方案1】：

只需将图片 URL 放在首位即可。

background-image:url(main_BG.png), linear-gradient(bottom, rgb(20,36,130) 44%, 
rgb(255,255,255) 67%, rgb(7,22,137) 26%);

【讨论】：