Soru Kullanımı: modal görüntü eklemek için CSS sözde elemandan önce


CSS sınıfım var Modal kesinlikle konumlandırılmış, üstündeki z-endeksli ve JQuery ile güzel bir şekilde konumlandırılmış. Modal kutusunun üstüne bir karet görüntüsü (^) eklemek istiyorum ve :before Bunu yapmak için CSS sözde seçici.

Görüntünün mutlak şekilde konumlandırılması ve modalın üstünde z-endekslenmesi gerekiyor, ancak resimdeki uygun sınıfa resim eklemenin herhangi bir yolunu bulamadım. content özellik:

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

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

İkinci en iyi seçenek - stil özniteliğini içerik özniteliğine ekleyebilir miyim?


76
2017-07-12 17:40


Menşei


Ona "havuç" demeyi kesmelisin. - thirtydot
@thirtydot Bu, onların rulo olmayan dillerdeki sorun. Rs ^ _ ^ - Petruza


Cevaplar:


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

:after ve :before ile content Internet Explorer dışındaki tüm büyük tarayıcılarda, en az 5 sürümde desteklendikleri için kullanılmaları uygun. Internet Explorer 9+ sürümünde tam destek ve sürüm 8'de kısmi destek sunar.

Aradığın şey bu mu?

.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;
}

Eğer değilse, biraz daha iyi açıklayabilir misiniz?

ya da Joshua'nın dediği gibi jQuery'yi kullanabilirsin:

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


129
2017-07-25 09:51



Bu. Joshua'nın tarayıcı uyumluluğu konusundaki noktası da doğrudur. IE8, görüntüyü şu içerikten alır: içerikten sonra, ancak bölümünün ebeveyn sınırının dışında kalan kısımlarını oluşturmaz. - RSG
Şimdi (2017), IE 11 hala Microsoft tarafından desteklenen IE'nin tek sürümüdür; Yani, IE8 uyumluluğu hakkında endişe etmenin pek bir anlamı yok. Ayrıca, bir CSS çözümü hemen hemen her zaman jQuery çözümünden daha iyidir çünkü daha hızlı yükleme eğilimi gösterirler ve jQuery, sayfa yüklendikten sonra düzeninizi yeniden yazarak ekran titremesine neden olabilir. - Nosajimiki
@Nosajimiki, eski tarayıcılar hakkında endişelenmeniz gerekip gerekmediğini çoğunlukla ziyaretçilerinize bağlıdır. - Jose Faeti


Bu öğeye bir görüntü vermek için background özniteliğini kullanmalısınız ve ben kullanıyorum :: daha önce yerine, bu şekilde zaten öğenizin üstüne çizilmelidir.

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

21
2017-07-12 17:46



Öneri için teşekkürler - modalın bir sınırı var, bu yüzden havuç görüntüsünü gerektiğinde kenarlık / bg renginin üzerine yerleştirmek için arka plan görüntüsünü kullanabileceğimi düşünmüyorum. - RSG
Neden olmasın? Bu sahte elemanı kesinlikle konumlandırırsanız, kenar boşlukları ile hareket ettirebilirsiniz. Diğer eleman sınırlarının üstüne ve / veya bg rengine çekilecektir. - Jose Faeti
Arka plan resmi div sınırının dışına uzanamaz mı? - RSG
Büyük olasılıkla bir içerik eklemeniz gerekiyor: ''; görünmesini sağlamak için buna - Willster


1.Bu senin sorunun için benim cevabım.

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

10
2017-07-22 17:16



ekledim background-size: 33px 16px; background-repeat: no-repeat; Resmi ölçeklemek için! - Hasse Björk


İçerik ve daha önce tarayıcılar arasında güvenilmezdir. Bunu başarmak için jQuery ile yapışmayı öneriyorum. Bu havuç eklenmesi gerekip gerekmediğini anlamak için ne yaptığınızdan emin değilim, ama genel fikri almalısınız:

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

-4
2017-07-12 17:48



Bu beni üzüyor. Merhametli bir şekilde sınırlı sayıda hedeflenmiş tarayıcıya sahibiz, bu yüzden hala CSS ile neler yapabileceğiyle ilgileniyorum. - RSG
CSS3'te yoğun olarak kullanılan içerikle bile, gördüğüm kadarıyla hala her yerde tam olarak desteklenmeyenlerden biri. Bunun, şeytani şeyleri enjekte edebilme korkusuyla yapılması gerektiğine inanıyorum. Ayrıca, içeriğin zaten var olan bir öğeye gereksinim duyduğuna inanıyorum - DOM'u kendi başına çok fazla kullanıp kullanamayacağımı bilmiyorum. - Joshua
Bu cevap, tarayıcılar arasında güvenilir olmayan desteğin olması konusunda yanlıştır. Content ve after/before Her bir büyük tarayıcıda çok güvenilir, ie8'den beri çalışıyor, en az FF3.5, en az Chrome 9, en azından Opera 10.6, en azından Safari 3.2, iOS Safari'nin her sürümü, Opera mini'nin her sürümü, her sürümü Opera Mobile ve Android tarayıcısının hiç sürümü. Bir şey çapraz tarayıcı desteklenen olup olmadığını bilmek istiyorsanız, kontrol edin: caniuse.com/#search=:after - android.nick
Sadece internet söylediği, doğru olduğu anlamına gelmez. Onlarla çalışın, her tarayıcıda farklı davranırlar. Ve IE 7, hala bunlardan hiçbirini desteklemeyen çok popüler bir tarayıcıdır. - Joshua
Aslında sen daha iyisin CSS üzerinde JavaScript bu konuda. Tarayıcıda ne kadar kanama olursa olsun, kullanıcı yine de JavaScript Engelli ... Neyse ki bu durumda :before ve :after Seçiciler yaygın olarak desteklenmektedir; quirksmode.org/css/selectors - Steve Buzonas