更新

Question

渐变效果在chrome中有效但在firefox和IE中没有..这里是渐变css代码

.large-thumb { 
  position: absolute;
  bottom: 15px;
  z-index: 99;
  padding: 5px 5px 20px;
  color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, 
  from(rgba(50,50,50,0.8)), to(rgba(80,80,80,0.2)), color-
  stop(.5,#333333)); 
  width: 291px; 
  margin-left: 20px;
  margin-left: 20px
  padding-bottom: 20px; 
  bottom: 31px;
  -moz-border-radius:25px;
  -webkit-border-radius:25px;
  border-radius:25px;
}

了解更多演示，请参阅demo blog site

Answer 1

您需要为旧版本的IE添加moz扩展名和过滤器。

See this page.

.large-thumb {
  position: absolute;
  top: 15px;
  z-index: 99;
  padding: 5px 5px 20px;
  color: #fff;
  background: rgba(0, 0, 0, 0.32);
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.85) 50%, rgba(0, 0, 0, 0.5) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0, 0.32)), color-stop(50%,rgba(0, 0, 0, 0.85)), color-stop(100%,rgba(0, 0, 0, 0.5)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.32) 0%,rgba(0, 0, 0, 0.85) 50%,rgba(0, 0, 0, 0.5) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.32) 0%,rgba(0, 0, 0, 0.85) 50%,rgba(0, 0, 0, 0.5) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.32) 0%,rgba(0, 0, 0, 0.85) 50%,rgba(0, 0, 0, 0.5) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.32) 0%,rgba(0, 0, 0, 0.85) 50%,rgba(0, 0, 0, 0.5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0, 0, 0, 0.32)', endColorstr='rgba(0, 0, 0, 0.5)',GradientType=0 );
  width: 291px;
  background: transperent;
  margin-left: 20px;
  margin-left: 20px;
  padding-bottom: 20px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}

您还可以查看CSS3Pie以获取IE支持。

更新

我更新了我的代码示例，在渐变中使用RGBA值，在现代浏览器中为您提供透明渐变。它应该在较新的旧浏览器上回归到纯色。

See this page for support details

Answer 2

该供应商前缀特定于基于Webkit的浏览器。所有浏览器现在都支持无前缀渐变，如下所示：

linear-gradient:([angle],[colours])

有关完整规范，请参阅http://www.w3.org/TR/css3-images/#linear-gradients。

渐变不适用于Firefox

2 个答案:

更新