Question

我有这个代码（sass）：

.orange-button{
  padding: 6px;
  @include gradient-background(bottom, $or1, #fbb752); 
  @include border-radius(5px, 5px, 5px, 5px);
  border: 1px solid #d27d00;
  font-family: “Myriad Pro”, Arial, Helvetica, Tahoma, sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: $or3;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .70);
  font-style: normal
}

如你所见，我的按钮有橙色渐变背景。但是我想在我的橙色上添加一个更透明的背景，这样按钮是橙色的，具有透明的“碳”风格。我怎么能这样做？

如果我写：

.orange-button{
  padding: 6px;
  @include gradient-background(bottom, $or1, #fbb752); 
  @include border-radius(5px, 5px, 5px, 5px);
  background: transparent url('button-carbon-bg.png') no-repeat;
  border: 1px solid #d27d00;
  font-family: “Myriad Pro”, Arial, Helvetica, Tahoma, sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: $or3;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .70);
  font-style: normal
}

我只能获得透明的碳背景，但我希望橙色和碳。

Answer 1

您必须编辑mixin / make your own以支持多种背景。这是对你的看法的简单调整：

@mixin gradient-background-with-img( $dir,$from, $to, $img) {
  background: #{$img}, -webkit-linear-gradient(to $dir, $from, $to);
  background: #{$img}, -moz-linear-gradient(to $dir, $from, $to);
  background: #{$img}, -ms-linear-gradient(to $dir, $from, $to);
  background: #{$img}, -o-linear-gradient(to $dir, $from, $to);
  background: #{$img}, linear-gradient(to $dir, $from, $to);
}

然后你就可以使用它：

div {
 @include gradient-background-with-img(bottom,$or1,#fbb752,'url(image.png) no-repeat left top'); 
}

Answer 2

您可能需要考虑使用Compass。它有一个mixin，可以为你做这件事（最多支持10个图像/渐变）：

http://compass-style.org/reference/compass/css3/images/

萨斯：

#linear-gradient {
    @include background(linear-gradient(left top, white, #dddddd), url('some-image.png'));
}

生成的CSS：

#linear-gradient {
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd)), url("some-image.png");
  background: -webkit-linear-gradient(left top, #ffffff, #dddddd), url("some-image.png");
  background: -moz-linear-gradient(left top, #ffffff, #dddddd), url("some-image.png");
  background: -o-linear-gradient(left top, #ffffff, #dddddd), url("some-image.png");
  background: linear-gradient(left top, #ffffff, #dddddd), url("some-image.png");
}

Answer 3

我不确定是否有SASS快捷方式，但必须在相同的background:属性中指定多个背景，用逗号分隔。写两个单独的属性会导致后一个属性覆盖前一个属性。

例如：

background: url('button-carbon-bg.png') no-repeat, url('another-image.png') no-repeat;

另请注意，它们按照规范的顺序呈现，第一个作为最高层。

有css的多个背景按钮

3 个答案: