0

画像に透明なグラデーションを付けたいので、次のことを行いましたが、画像のみが表示されます

background-image: url(../img/hex-pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(8%,rgba(255,255,255,0)), color-stop(92%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.2)));

理由はありますか？

4

2 に答える 2

4

最初に画像を指定すると、その画像はグラデーションの上に描画され、完全に覆い隠されます。グラデーションが上に重ねられるように、それらを切り替える必要があります（仕様を参照してください）：

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(8%,rgba(255,255,255,0)), color-stop(92%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.2))), url(../img/hex-pattern.png);

残りのグラデーション プレフィックスとプレフィックスのないものも含めることを忘れないでください。ただし、これは、宣言のurl()一部も複製することを意味します。background-image

于 2012-08-27T07:51:27.590 に答える
2

背景の順序 (z-index と考えてください) は、論理的なものから正確に逆になっています。設定した最初の背景は一番上のものです:

http://css-tricks.com/stacking-order-of-multiple-backgrounds/

それは私に同様の欲求不満を引き起こしました。リンクのように、垂直に考えてください。

body {
    background:
        background1, <-top
        background2,
        background3; <-bottom
}
于 2012-08-27T07:56:47.703 に答える