0

私は無地の背景色を持ち、その上に特定の不透明度でグラデーションを付けたいと思っています。このように、1 つの背景色の上にグラデーションの効果があるように見えます。

これは私のhtmlです：

<article>
    <a href="" class="article">
      <h2>Title<i></i></h2>
      <img src="images/media-examples/pic1.jpg">
    </a>
</article>

これをヘッダーに適用して、次のようなものを作成したいと思います。

ここに画像の説明を入力

4

2 に答える 2

5

例から判断すると、グラデーションは必要ありません。不透明度を持つ上にある要素が必要なだけです。そう

HTML

<div id="element">
 <div id="overlay">
 <h2>H2 Title</h2>
 </div>
</div>

CSS

#element {background:url('image.jpg');}
#overlay {background:rgba(0, 0, 0, 0.5);}

チュートリアルが必要であり、実際に試して、うまくいかない場合は助けを求める必要があると思われるため、これ以上詳しくは説明しません。インターネットで検索してみてください。ネット上にはたくさんのチュートリアルがあります。

更新 既存の HTML を使用するには、この CSS を適用してみてください

article {width:300px;}
article img {position:fixed; top:0; border:3px solid #253d8e; z-index:99;}
article h2 {z-index:999; position:fixed; top:0; color:#fff; background:rgba(0, 0, 0, 0.5); width:290px; display:inline-block;margin:0; padding-top:10px; padding-bottom:10px; padding-left:10px;}

ニーズに合わせてこれを更新する必要がありますが、アイデアが得られるはずです。ここでjsfiddleで動作していることを確認してください

于 2013-02-27T12:17:19.873 に答える
0

不透明な背景を持つ画像の上に別の要素を追加します...このようにして、すべての属性を簡単に制御できます。

同じ要素に 2 つの背景を適用するか、次のような疑似要素を使用することもできます: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

編集: 申し訳ありませんが、Tim は同じであるがより詳細なオーバーレイ要素の回答でほんの少しだけ高速でした =) しかし、今は他の 2 つの提案の功績を認めたいだけです ;-)

于 2013-02-27T12:21:37.827 に答える