具有渐变颜色的背景图像在 chrome 中不起作用答案

【问题标题】：Background image with gradient color not working in chrome具有渐变颜色的背景图像在 chrome 中不起作用
【发布时间】：2018-04-23 22:21:12
【问题描述】：

我正在尝试将 webkit 渐变标签与 Chrome 的图像一起使用，渐变颜色可以工作，但图像不会在 chrome 中显示。我已经在 Firefox 中尝试过，图像和渐变颜色工作正常。

background: linear-gradient(to bottom, rgb(74,40,73,.8), 
rgb(147,98,143,.8)), url(./images/covers/1.jpg) no-repeat;

.profile-card {

	background: linear-gradient(to bottom, rgba(74,40,73,.8), rgb(147,98,143,.8)), url(./images/covers/1.jpg) no-repeat;
  
	background: -webkit-linear-gradient(bottom, #4A2849, #93628F), url(./images/covers/1.jpg) no-repeat;  /* image not working in chrome */
	background-size: cover;
	width: 100%;
	min-height: 90px;
	border-radius: 4px;
	color: #fff;

  }

<div class="profile-card">
          <img src="images/users/user-1.jpg" alt="user" class="profile-photo">
          <h5><a href="#" class="text-white">abc 
        </div><!--profile ends-->

但在 chrome 中我尝试过使用此代码

background: -webkit-linear-gradient(bottom, #4A2849, #93628F), 
url(./images/covers/1.jpg) no-repeat;

但图像未以 chrome 显示。

【问题讨论】：

请点击<>并添加一个带有lorempixel图片的sn-p
-webkit- 用于 IE 和 Edge，而不是 Chrome。 Chrome 使用该标准。
@EGxo 在我的 Chrome OSX 中，我只在我制作的 sn-p 中看到 B 中的颜色

标签： html css

【解决方案1】：

使用 rgba 代替 rgb，例如：

.a { background: linear-gradient(to bottom, rgba(74,40,73,.8), 
rgba(147,98,143,.8)), url(./images/covers/1.jpg) no-repeat;  
}

.b {
background: -webkit-linear-gradient(bottom, #4A2849, #93628F), 
url(./images/covers/1.jpg) no-repeat;
}

<div class="a">A</div>
<div class="b">B</div>

【讨论】：