2

私は CSS3 に慣れていて、Photoshop コンプを HTML に変換するために最善を尽くしています。

高さの異なる複数の背景 (背景 URL を使用) のインスタンスがあり、 rgba グラデーション(アルファ チャネルを使用) を使用して、その背景の上にグラデーションを適用したいと考えています。私は明らかに、グラデーションがピクセルに組み込まれた静的な背景画像から離れたいと思っています。

バックグラウンド URL の上にグラデーションを「積み重ねる」ことによって CSS でこれを行う方法はありますか?

1 つの要素でそれを行うことができない場合は、背景要素内にコンテナーを配置し、それをフロートさせ、幅と高さで背景要素を埋めるようにすると思いますが、それはかなり面倒です。

どんなアドバイスでも大歓迎です！御時間ありがとうございます！

背景とグラデーションが同じで、高さが異なる 2 つの例を次に示します。ナビゲーションとフッターです。

背景とわずかなグラデーションのあるナビゲーション ここに画像の説明を入力

コードは次のようになります。

<nav>
 <ul>
  <li>Menu item 1</li>
  <li>Menu item 2</li>
  <li>Menu item 3</li>
  <li>Menu item 4</li>
 </ul>
</nav>

スタイル：

nav {
  background : url('repeating-background-image.png') repeat;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /*    Chrome10+,Safari5.1+ */
}
4

3 に答える 3

2

バックグラウンド URL の上にグラデーションを「積み重ねる」ことによって CSS でこれを行う方法はありますか?

はい: CSS3 では、コンマで区切られた複数の背景画像を使用できます。

グラデーションは画像のように動作するため、背景画像と組み合わせて使用​​できます。

div {
    width: 400px;
    height: 400px;
    background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /*    Chrome10+,Safari5.1+ */
}

これは IE 8 以前では機能しませんが、CSS グラデーションも機能しません。(Microsoft のfilterプロパティは IE 8 以前で機能し、アルファ透明度を使用したグラデーションをサポートしていますが、Internet Explorer のフィルター プロパティで生成されたグラデーションで rgba 色を使用できますか? を参照してください)。

于 2013-07-24T13:24:03.327 に答える
0

CSS:beforeを使用して、元の要素の上に追加の (疑似) 要素を作成します。

元の要素には画像の背景があり、:after要素にはグラデーションがあり、元の要素が透けて見えるように不透明度が設定されています。

div {
    width: (whatever size you want to set it to)
    height: (ditto)
    position:relative;
    background:url('mainImage.jpg');
    z-index:5;
}

div::before {
    content:'';
    width: .... (same as main div)
    height: .... (same as main div)
    position:absolute;
    z-index:-3;
    display:block;
    opacity:0.5;
    background: linear-gradient(to bottom, #8fc400 0%,#ff0000 100%); /* plus add the other browser-specific gradient styles too */
}

デモ用に jsFiddle を作成しました。こちらを参照してください。

それが役立つことを願っています。

[編集] OPのコメントに応じて、上記の回答の詳細をわずかに変更しました。現在:beforeは ではなく:afterを使用z-indexし、実際のテキスト コンテンツが両方の背景の上に表示されるようにレイヤー化するために使用しています。

于 2013-07-24T13:00:05.997 に答える
0

http://jsfiddle.net/8gvZM/

background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */

その上に、不透明度の低い背景の URL で div を作成します。

そうですか？

于 2013-07-24T12:12:20.753 に答える