Bir görüntü kullanarak belirli dosya türlerine bağlantıları süslemek istediğimi varsayalım. Bağlantılarımı şu şekilde beyan edebilirim:

<a href='foo.pdf' class='pdflink'>A File!</a>

sonra CSS gibi

.pdflink:after { content: url('/images/pdf.png') }

pdf.pngBağlantı metnim için doğru boyutta değilse , şimdi bu harika çalışıyor .

Tarayıcıya :afterresmi ölçeklendirmesini söyleyebilmek istiyorum , ancak hayatım boyunca doğru sözdizimini bulamıyorum. Yoksa yeniden boyutlandırmanın mümkün olmadığı arka plan resimleri gibi mi?

ETA: a) kaynak görüntüyü "doğru" boyut, sunucu tarafı ve / veya b) olarak yeniden boyutlandırıyorum. Her iki şeyden de kaçınmaya çalışıyordum ama sadece CSS ile bir şeyler yapmaya çalışmaktan daha uyumlu olacak gibi görünüyorlar. Benim asıl soruya cevabı "yapabilirsiniz gibi görünüyor arasında sıralamak bazen bunu".

Ayarlanmasına background-sizeizin verilir. Ancak yine de bloğun genişliğini ve yüksekliğini belirtmeniz gerekir.

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

MDN'deki Uyumluluk Tablosunun tamamına bakın .

:afterSözde öğenin, oluşturulan görüntüyü içeren bir kutu olduğunu unutmayın . Görüntüyü biçimlendirmenin bir yolu yoktur, ancak kutuyu biçimlendirebilirsiniz.

Aşağıdaki sadece bir fikirdir ve yukarıdaki çözüm daha pratiktir.

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

Dezavantajları: görüntünün gerçek boyutlarını bilmeniz gerekir ve ATM'den kurtulamadığım bazı boşluklar bırakır.

Diğer cevabım açıkça anlaşılmadığından, ikinci bir girişim:

Soruyu cevaplamak için iki yaklaşım var.

Pratik (sadece bana lanet olası resmi göster!)

:afterYalancı seçiciyi unut ve benzeri bir şeye git

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

Teorik

Soru şudur: Oluşturulan içeriği biçimlendirebilir misiniz ? Cevap: Hayır, yapamazsınız. Orada bir oldu W3C posta listesinde uzun tartışma bu konuda, ama hiçbir çözüm bugüne kadar.

Oluşturulan içerik, oluşturulan bir kutuya dönüştürülür ve bu kutuya stil uygulayabilirsiniz, ancak içeriği bu şekilde yapamazsınız . Farklı tarayıcılar çok farklı davranışlar gösterir

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

Chrome birincisini yeniden boyutlandırır, ancak ikincisi için resmin gerçek boyutlarını kullanır

firefox ve yani birincisini desteklemeyin ve ikincisi için iç boyutları kullanın

opera her iki durum için de içsel boyutlar kullanır

( http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html adresinden )

Benzer şekilde, tarayıcılar , birden fazla öğenin oluşturulduğu http://jsfiddle.net/Nwupm/1/ gibi şeylerde çok farklı sonuçlar gösterir . CSS3'ün hala erken gelişme aşamasında olduğunu ve bu sorunun henüz çözülmediğini unutmayın.

Görüntü yerine arka plan kullanmalısınız.

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}

diplay: block; herhangi bir etkisi yok

positionin ayrıca temelleri ön plana göre çok garip çalışır, bu yüzden dikkatli olun

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}

İşte başka (çalışan) bir çözüm: resimlerinizi istediğiniz boyuta getirin :)

.pdflink:after {
    display: block;
    width: 20px;
    height: 10px;
    content:url('/images/pdf.png');
}

Bunun çalışması için pdf.png dosyasının 20px * 10px olması gerekir. Css'deki 20px / 10px, bloğun boyutunu vermek için buradadır, böylece bloktan sonra gelen öğelerin tümü görüntüyle karıştırılmaz

Ham görüntünün bir kopyasını orijinal boyutunda tutmayı unutmayın

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    width: 10px; 
    height: 20px;
    padding-left: 10px;// equal to width of image.
    margin-left:5px;// to add some space for better look
    content:"";
}

zoomÖzelliği kullanabilirsiniz . Bu jsfiddle'ı kontrol edin

Önce veya Sonra öğesinin yüksekliğini veya genişliğini şu şekilde değiştirebilirsiniz :

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}

Bu yazı tipi boyutu kontrol genişliğini kullandım

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}

Günümüzde flexbox ile kodunuzu büyük ölçüde basitleştirebilir ve yalnızca 1 parametreyi gerektiği gibi ayarlayabilirsiniz:

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 10px;
}

Şimdi elemanın genişliğini ayarlayabilirsiniz ve yükseklik elemanın yüksekliği ihtiyacınız olan sayıya gelene kadar yüksekliği otomatik olarak ayarlayacak, genişliği artıracak / azaltacaktır.

content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;