web-dev-qa-db-ja.com

cssにbackground-imageに相当する前景はありますか？

ウェブページの要素に輝きを加えたいです。ページに追加のhtmlを追加する必要がなければ、私は好むでしょう。画像を要素の後ろではなく要素の前に表示したい。これを行う最良の方法は何ですか？

htmlcsscss3foreground
44
Himmators

余分なHTMLコードなしで「前景画像」を実現するには、擬似要素（::before/:before）を使用できますプラスCSS pointer-events =。最後のプロパティは、ユーザーが実際に「存在しないかのように」レイヤーをクリックできるようにするために必要です。

以下に例を示します（アルファチャネルが50％の色を使用して、実際の要素に実際に焦点を合わせることができるようにします）： http://jsfiddle.net/JxNdT/

​<div id="cont">
Test<br>
<input type="text" placeholder="edit">
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

​#cont {
    width: 200px;
    height: 200px;
    border: 1px solid #aaa; /*To show the boundaries of the element*/
}
#cont:before {
    position: absolute;
    content: '';
    background: rgba(0,0,0, 0.5); /*partially transparent image*/
    width: 200px;
    height: 200px;
    pointer-events: none;
}
​

PS。 ::before疑似要素を選択しました。これは、当然、正しい配置につながるためです。 ::afterを選択した場合、position:relative;を実際の要素（#cont）に追加し、top:0;left:0;を擬似要素（::after）に追加する必要があります。

PPS。 固定サイズのない要素に対する前景効果を取得するには、追加の要素が必要です。このラッパー要素には、position:relative;display:inline-block;スタイルが必要です。擬似要素のwidthおよびheightを100%に設定すると、擬似要素はラッパー要素の幅と高さに合わせて伸縮します。デモ： http://jsfiddle.net/JxNdT/1/ 。

67
Rob W

このCSSを使用できます

#yourImage
{
z-index: 1; 
}

[〜＃〜] note [〜＃〜]

z-indexを設定して、画像を置く要素のz-indexより大きいインデックスを付けます。

z-indexを指定していない場合、1が作業を行います。

z-indexを-1に設定することもできます。その場合、画像は常にbackgroundになります！

1
Anirudha

白い透明な前景が必要な場合

これは、たとえば、要素が非表示/無効になっていることを伝えるために、要素に白透明の前景を追加することを検討している私のような将来の訪問者向けです。多くの場合、opacityを1未満に下げるだけで目標を達成できます。

.is-hidden {
    opacity: 0.5;
}
visible
<span class="is-hidden">hidden</span>
visible
1
Bart S