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

Question

我正在尝试将 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 中。

Answer 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>