CSS - 线性渐变在任何浏览器中都不起作用

Question

我有一个class：

.breadcrumb_area {
  background-image: -moz-linear-gradient(180deg, #5e2ced 0%, #a485fd 100%);
  background-image: -webkit-linear-gradient(180deg, #5e2ced 0%, #a485fd 100%);
  background-image: -ms-linear-gradient(180deg, #5e2ced 0%, #a485fd 100%);
  position: relative;
  z-index: 1;
  padding: 235px 0px 125px;
  overflow: hidden;
}

现在，我正在使用预定义的html css模板。此类在模板页面中工作正常。但是当我在页面中使用同一个类时react它不起作用。

在 chrome 开发人员工具中，行background-image已被删除。

<section className="breadcrumb_area">
        <img className="breadcrumb_shap" src={`${banner_bg}`} alt="" />
        <div className="container">
            <div className="breadcrumb_content text-center">
                <h1 className="f_p f_700 f_size_50 w_color l_height50 mb_20">Services</h1>
                <p className="f_300 w_color f_size_16 l_height26">
                  Why I say old chap that is spiffing off his nut arse pear shaped plastered<br/> 
                  Jeffrey bodge barney some dodgy.!!
                </p>
            </div>
        </div>
    </section>

同样的事情在这里也有效

如何对所有浏览器使用线性渐变？

Answer 1

.breadcrumb_area {
  background-image: linear-gradient(180deg, #5e2ced 0%, #a485fd 100%);
  position: relative;
  z-index: 1;
  padding: 235px 0px 125px;
  overflow: hidden;
}

对于构建，我在 babel 或 webpack 配置中添加了自动前缀器

它对我有用