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>

同一件事here as well

如何在所有浏览器中使用线性梯度？

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配置中添加了autoprefixer

对我有用

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

1 个答案: