57

Web ページの要素に光沢を追加したい。ページに追加の html を追加する必要がない方がいいと思います。画像を要素の後ろではなく前に表示したい。これを行う最善の方法は何ですか？

4

4 に答える 4

75

「前景画像」を (追加の HTML コードなしで) 実現するには、疑似要素 ( ::before/ :before)と CSSpointer-eventsを使用できます。最後のプロパティは、ユーザーがレイヤーを実際に「存在しないかのように」クリックできるようにするために必要です。

以下に例を示します (アルファ チャネルが 50% の色を使用して、実際の要素に実際に焦点を合わせることができることを確認できます)。http://jsfiddle.net/JxNdT/

#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;
    }
    <div id="cont">
    Test<br>
    <input type="text" placeholder="edit">
    </div>

PS. ::before疑似要素を選択したのは、それが自然に正しい配置につながるからです。を選択すると、実要素 ( ) と疑似要素 ( )::afterに追加する必要があります。position:relative;#conttop:0;left:0;::after

PPS。固定サイズのない要素で前景効果を得るには、追加の要素が必要です。このラッパー要素にはposition:relative;display:inline-block;スタイルが必要です。疑似要素の and を に設定するwidthと、疑似要素はラッパー要素の幅と高さに引き伸ばされます。デモ: http://jsfiddle.net/JxNdT/1/ .height100%

于 2012-09-30T09:15:21.323 に答える
3

このcssを使用できます

#yourImage
{
z-index: 1; 
}

ノート

画像を配置する要素のz-indexインデックスより大きい値を設定します。z-index

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

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

于 2012-09-30T08:53:17.977 に答える
3

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

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

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

于 2016-09-27T12:51:16.100 に答える