web-dev-qa-db-ja.com

モーダルに画像を追加するためのCSS擬似要素の前に：を使用

私はCSSクラスModalを持っています。これは絶対位置にあり、親の上にzインデックスが付いていて、JQueryとうまく位置が合っています。モーダルボックスの一番上にキャレットイメージ（^）を追加したいのですが、これをきれいにするためにCSS :before CSS擬似セレクタを使用することを検討していました。

画像はモーダルの上に絶対配置してzインデックスを付ける必要がありますが、content属性で適切なクラスを画像に追加する方法は見つかりませんでした。

.Modal:before{
  content:url('blackCarrot.png') /* with class ModalCarrot ??*/
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

次善の策 - content属性にスタイルをインラインで追加できますか？

cssmodal-dialogpseudo-element
99
RSG

http://caniuse.com/#search=:after

contentを指定した:afterおよび:beforeは、Internet Explorer以外のすべての主要ブラウザでサポートされているため、少なくとも5つのバージョンがサポートされているため、問題ありません。 Internet Explorerは、バージョン9以降で完全にサポートされ、バージョン8では部分的にサポートされています。

これはあなたが探しているものですか？

.Modal:after{
  content:url('blackCarrot.png'); /* with class ModalCarrot ??*/
  position:relative; /*or absolute*/
  z-index:100000; /*a number that's more than the modal box*/
  left:-50px;
  top:10px;
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

そうでない場合は、もう少し詳しく説明できますか。

joshuaが言ったように、jQueryを使うこともできます。

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");

150
android.nick

Background属性を使用してその要素に画像を設定する必要があります。以前の代わりに:: afterを使用します。この方法で、要素の上に既に描画されているはずです。

.Modal:before{
  content: '';
  background:url('blackCarrot.png');
  width: /* width of the image */;
  height: /* height of the image */;
  display: block;
}
30
Jose Faeti

1.これがあなたの問題に対する私の答えです。

.ModalCarrot::before {
content:'';
background: url('blackCarrot.png'); /*url of image*/
height: 16px; /*height of image*/
width: 33px;  /*width of image*/
position: absolute;
}
11
hoang thao