带有渐变的 Ionic 3 背景图像在设备中不起作用答案

【问题标题】：Ionic 3 background image with a gradiant not working in device带有渐变的 Ionic 3 背景图像在设备中不起作用
【发布时间】：2018-12-07 17:01:41
【问题描述】：

我正在尝试在我的 ionic 应用程序中为离子内容设置带有渐变的背景图像。当我运行 ionic 时，它工作得很好。但是当它在设备上时它不工作。这是我的css代码如下所示

ion-content{
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-image: linear-gradient(#0000004b, black), url('../assets/imgs/wel2.png');

    }

如何修复以在设备中工作

【问题讨论】：

只是在 scss 文件中的 ionic 中尝试相同的代码，但我收到错误 Invalid CSS after "...inear-gradient(": expected expression (e.g. 1px, bold), is "#0000004b,黑色），“

标签： html css angular ionic-framework gradient

【解决方案1】：

#element {
        background: linear-gradient(#0000004b, black); /* the standard */  
        background: -moz-linear-gradient(#0000004b, black); /* FF 3.6+ */  
        background: -ms-linear-gradient(#0000004b, black); /* IE10 */ 
        background: -webkit-linear-gradient(#0000004b, black); /* Safari 5.1+, Chrome 10+ */  
        background: -o-linear-gradient(#0000004b, black); /* Opera 11.10 */  
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000004b', endColorstr=black); /* IE6 & IE7 */  
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000004b', endColorstr=black)"; /* IE8+ */
    }

还要检查 #element 的 z-index

【讨论】：