1

我有这个代码（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
}

我只能得到一个透明的碳背景，但我想要橙色和碳。

4

3 回答 3

1

您必须编辑 mixin/自己制作以支持多种背景。这是您的外观的简单调整：

@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'); 
}
于 2012-11-21T21:15:43.763 回答
1

您可能要考虑使用 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");
}
于 2012-11-21T21:19:14.817 回答
0

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

例如：

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

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

于 2012-11-21T21:02:21.927 回答