1

下の画像に影を付ける方法を知りたいので、ソースコードを確認しようとしましたが、何も見つかりませんでした。何か案が？ありがとうございました

カバー画像の例、またはプロフィールページの名前の下にあるウィジェットの友達を参照してください。白い色の名前をよく見るための影があります

4

4 に答える 4

2

あなたはグラデーションを探しているようです。オプションは画像でこれを行うことですが、これは css でも行うことができます。このページをご覧ください。または、Google/Bing/.. でcss3 gradientを検索します。

リンクしたジェネレーターで生成したものを簡単にいじりましたが、それはあなたのニーズに合うかもしれません。背景色を好きな色に変更して (例では赤に設定)、透明であることを示すことができます。

background: -moz-linear-gradient(top, rgba(43,43,43,0) 0%, rgba(43,43,43,0) 40%, rgba(43,43,43,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(43,43,43,0)), color-stop(40%,rgba(43,43,43,0)), color-stop(100%,rgba(43,43,43,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002b2b2b', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-9 */

アップデート

Facebook のコードを見ると、画像をオーバーレイするために画像を使用しているように見えます。ソースを見ると、にa#fbCoverImageContainer.coverWrap.coverImageは背景のイメージを含む2 つの重要な子があることがわかります。img.coverPhotoImg.photo.img画像の一部しか表示されないため、この画像はバナー自体の高さよりも大きくなることがよくあります。もう1 つの重要な子はdiv.coverBorderです。ソースを見ると、次の css があります。

background: url(/rsrc.php/v2/yJ/r/UgNUNkKQar6.png) bottom left repeat-x;

これは、オーバーレイを作成する 1x95 ピクセルの画像です。fbが使用する画像

私は少し手探りして、この fiddleにたどり着きました。これは私が使用したコードです：

html

<div class='myHeader'>
    <img src='http://lorempixel.com/output/people-q-c-747-438-1.jpg' />
    <div class='coverBorder'></div>
</div>

CSS

.myHeader{
    display:block;
    position:relative;
    height:315px;
    overflow:hidden;
}
.coverBorder{
    background: url(http://i.imgur.com/UGqidBk.png) bottom left repeat-x;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
}

フィドルを見ると、画像が div の外側に拡大されていることがはっきりとわかりますが、これはoverflow:hidden;隠されています。div.myHeader現在、オーバーレイは幅がなく、100% に設定されるため、画像の外側に拡張されます。500px にすると、簡単に拡大縮小できることがわかります。

于 2013-08-31T22:48:16.727 に答える
0

css ファイルにシャドウ クラスを作成する

.shadowThing
{
    box-shadow: 2px 2px 3px 2px #333;
}

次に、HTML の div (またはその他のもの) に適用します。

<div class="shadowThing">
    <!--some content here-->
</div>
于 2013-08-31T21:48:11.087 に答える
0

グラデーション背景の使用。ログインする前にホームページについて話していると思います。あなたが本当に影を意味するなら、もっと具体的にしてください.

コメントに応じて編集：

はい。それは影ではなく、グラデーションの背景画像が繰り返されています。

background: url(background-url.png) bottom left repeat-x;

Google 画像検索を使用して、用語「グラデーション」を検索します。

これは、画像の小さなスライスを取り、x 軸に沿って背景として繰り返すことによって実現されます。

于 2013-08-31T21:46:20.643 に答える
0

CSSbox-shadowプロパティを使用する

構文は次のとおりです。

box-shadow: h-shadow v-shadow ブラー スプレッド カラー インセット。

したがって、次のように使用します。

.shadow {
    box-shadow: 2px 2px 2px 2px #888888;
}

例については、このフィドルを参照してください

高さと幅のプロパティが設定されたブロック要素に適用すると、次のようになります。

デモ

于 2013-08-31T22:07:04.477 に答える