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;

＆＃13;

.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;

  }

＆＃13;

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

＆＃13;

但在Chrome中我试过这段代码

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

但图片未显示在chrome中。

Answer 1

使用 rgba 代替 rgb ，例如：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

与梯度颜色的背景图象不运作在镀铬物

1 个答案: