CSSで擬似要素の中にイメージを置く方法?

1600 ワード

css テキストリンク

Originally posted here!
イメージを擬似要素内のコンテンツとして置く:before and :after , あなたはurl() CSSで機能し、イメージファイルへのリンクを関数として文字列として渡します.

/* Put image in Pseudo element ✅ */
div:after {
  content: url("path-to-my-image.jpg");
}

例えば、実像を使って理解しましょう.チェックアウトimage この例では使用します.
現在:after or :before Aのための擬似要素p ( Paragragh )要素は、このように使用できます.

p:before {
  content: url("https://upload.wikimedia.org/wikipedia/commons/1/1d/Football_Pallo_valmiina-cropped.jpg");
}

それだ!🔥
上のコードはJSBin

お気軽に共有する場合は、この便利な発見😃.

この問題について(CSSで擬似要素の中にイメージを置く方法?), 我々は、より多くの情報をここで見つけました https://dev.to/melvin2016/how-to-put-an-image-inside-pseudo-elements-in-css-1io0

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol