1

background-image と -webkit-linear-gradient を使用して純粋な CSS でグリッドを作成しようとしています。間隔とタイリングは正常に機能していますが、理由がわからないため、指定したように #E3E4E5 ではなく #B8B8B9 として垂直線が出てきます。何か案は？

JSFiddle: http://jsfiddle.net/2faSt/

CSS:

.grid {
    position: absolute;
    width: 100%;
    height: 500px;
    background-image: -webkit-linear-gradient(0deg, #e3e4e5 0px, transparent 1px, transparent 15px, #e3e4e5 16px, transparent 16px, transparent 99px, #e3e4e5 100px, #ffffff 100px), -webkit-linear-gradient(90deg, transparent 20px, #e3e4e5 20px);
    background-size: 111px 21px;
}
4

1 に答える 1

2

指定した色を実際に取得したい場合は、同じ色の2 つのカラー ストップを 1 ピクセル以上離して設定する必要があります。

それ以外の場合は、グラデーションの変更点のみを設定しますが、同じピクセルでも既に透明に変更されています

そして、非直感的でも黒透明(rgba(0,0,0,1))なら透明

このフィドルを参照してください

そこに、次の CSS があります。

#one {
    background: linear-gradient(90deg, #e3e4e5, transparent);
}

#two {
    background: linear-gradient(90deg, #e3e4e5, rgba(255, 255, 255, 1));
}

最初の div (質問では同じ色がそれを停止します) では、遷移の途中で色が最初よりも暗いことがわかります。比較として、2 番目に意図したものを確認できます。白への移行を透明にします。

于 2013-07-01T18:50:17.117 に答える