1

おそらく回避策、または達成するための追加の要素が必要ですが、とにかく質問します。

シンプルなイメージです。画像は対角線上に2つに分割されます。上部は無地で、下部は透明です。次のコードを適用すると、背景色が画像の透明度を塗りつぶします。色を配置する方法や、画像領域がどこにあるかを色で表示せず、代わりに要素の残りの部分を塗りつぶす方法はありますか？

#content:before {
    position: absolute;
    z-index: -1;
    bottom: -35px;
    content: "";
    width: 35px;
    height: 465px;
    left: -35px;
    background: #121314 url(library/images/content-fold-left.png) 0 bottom no-repeat;
}
4

1 に答える 1

1

CSS3グラデーションを使用します。

html, body {
  height: 100%;
}

body {
  background: -webkit-gradient(linear, 50% 0%, 50% 100, color-stop(100%, rgba(0, 0, 0, 0)), color-stop(100%, #fa8072));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
  background: linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
}

これがデモです。

私がSassとCompassを使用したことに気付くでしょう。さまざまなグラデーション構文は悪夢ですが、SassとCompassを使用すると、作成する必要があるのは次のとおりです。

body
  +background(linear-gradient(top, rgba(0,0,0,0) 100px, salmon 100px))

そして、それはあなたのためにすべてのベンダープレフィックスと異なるレガシー構文をコンパイルします。

于 2012-10-18T14:56:43.997 に答える