SORU
31 EKİM 2010, Pazar


Opaklık CSS3 Sınır?

Orada ileri CSS düzgün bir şekilde bir öğenin kenarlığı gibi bir şey ile yarı saydam yapmak için :

border-opacity:0.7;

?

Kimseye bu kadar resim kullanmadan nasıl yapabilirim bir fikri olan var mı?

CEVAP
31 EKİM 2010, Pazar


Ne yazık ki opacity öğe bütün unsur ya da herhangi bir metin de dahil olmak üzere) yarı saydam hale getirir. Sınır yarı saydam yapmak için en iyi şekilde temsil etmek renk biçimi. Örneğin, bu yüzde 50 opaklık ile kırmızı bir sınır vermek istiyorum:

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9 , Firefox 4 , Opera, Chrome */
}

Bu yaklaşım ile sorun bazı tarayıcılar rgba biçimini anlamak ve eğer bu tüm Bildirgesi ise herhangi bir sınır görüntülenir. Çözüm iki sınır tanımlamalar sağlamaktır. Sahte ışık, gerçek ile ikinci ile ilk. Eğer bir tarayıcı yetenekli ise, ikinci kullanın, ilk kullanacak yoksa.

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9 , Firefox 4 , Opera, Chrome */
}

İlk sınır Bildirgesi eşdeğer beyaz bir arka plan sınırı altında herhangi bir grafik dağılmaz rağmen) P opak kırmızı kenarlık rengi olacak.

GÜNCELLEME:"Arka plan-klip: dolgu-box;" bu cevap (yorum SooDesuNe önerisine göre) sınır sağlamak için sağlam bir arka plan rengi uygulanırsa bile şeffaf kalır. ekledim

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • ChrisCrossMedia

    ChrisCrossMe

    17 EYLÜL 2009
  • FullMag

    FullMag

    15 ŞUBAT 2007
  • MkElite

    MkElite

    13 NİSAN 2012

İLGİLİ SORU / CEVAPLAR