[解決済み] cssのbackground-imageに相当するforegroundはあるのでしょうか？

質問

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

どのように解決するのですか？

前景画像（quot;foreground image"）を（余分なHTMLコードなしで）実現するには、擬似要素（quot;foreground image")を使用します。 ::before / :before ) とCSS pointer-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; を実際の要素 ( #cont ) と top:0;left:0; を擬似要素( ::after ).

PPSです。を取得するために サイズが固定されていない要素に対する前景効果 の場合、追加要素が必要です。このラッパー要素には position:relative;display:inline-block; のスタイルになります。を設定します。 width と height を擬似要素の 100% と表示され、擬似要素がラッパー要素の幅と高さにストレッチされます。デモ http://jsfiddle.net/JxNdT/1/ .