1

要素に適用したい次の背景プロパティがあります。

background: url('../img/bg.png') !important;

background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%) !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))) !important;
background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -o-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -ms-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;

画像を最初に表示し、その上にグラデーションを表示したい。これを行うことは可能ですか？

4

3 に答える 3

1

おそらく 2 つの要素が必要になるでしょうが、疑似要素を使用して、物事をもう少しきれいにすることができます。フィドル。

#yourelement {
    position: relative;

    background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%) !important;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))) !important;
    background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
    background: -o-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
    background: -ms-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
    background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
}

#yourelement:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: url('../img/bg.png') !important;
}
于 2013-08-14T18:37:41.653 に答える
0

私はそれを試してみましたが、運が良ければ、これは私のサファリブラウザで機能しました。

background: url('img.png'), -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%,transparent 50%,rgba(0, 0, 0, 1) 100%);

したがって、あなたの場合は使用します

background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0, 0, 0, 1)), color-stop(50%,transparent), color-stop(100%,rgba(0, 0, 0, 1))), url('../img/bg.png');

ここにフィドルがあります

于 2013-08-14T18:37:30.123 に答える