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
}

ご覧のとおり、ボタンにはオレンジ色のグラデーションの背景があります。しかし、オレンジにもう1つ透明な背景を配置して、ボタンが透明な「カーボン」スタイルのオレンジになるようにします。これどうやってするの？

私が書いた場合：

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

コンパスの使用を検討することをお勧めします。それはあなたのためにそれをするミックスインを持っています（それは最大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:プロパティで複数の背景をカンマで区切って指定する必要があります。2つの別々のプロパティを書き込むと、後者のプロパティが前のプロパティを上書きします。

例えば：

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

また、最初のレイヤーが最上位レイヤーとして、指定順にレンダリングされることにも注意してください。

于 2012-11-21T21:02:21.927 に答える