SORU
9 EYLÜL 2015, ÇARŞAMBA


'de temsil etmek arasındaki fark(0,0,0,0) ler ne ve şeffaf?

one of my other questions çözüm için sabitleme bir işleme konuydu kullanarak değeri rgba(255, 255, 255, 255) yerine transparent. test kullanarak rgba(0, 0, 0, 0) ve bu hala düzeltilmiş sorun, yani bu tanımı transparent Bu bir hata neden olur. Ancak, transparent W3C CSS3 Specification (MDN reference) rgba(0, 0, 0, 0) transparent eşit olması gerektiğini ortaya koymaktadır:

şeffaf

Tamamen şeffaf. Bu bir anahtar kelime olarak kabul edilebilir onun hesaplanan şeffaf siyah, rgba(0,0,0,0), steno değer.

Ne oluyor? Neden iki, görünüşte, aynı değerleri farklı sonuçlar üretebilir? Temsil etmek the formatting içine baktım, ve benzeri sorular (boşuna) arıyorlardı. rgba(0,0,0,0) 24 *dönüştürme söz edilen her soru/cevap hep kelimeler var 'ya da' göre'. (Örneğin here). Gerçek fark nedir ve neden çıktı o kadar çok değişiklik oluyor mu?

N. B:Bu, hepsi değilse de, İnternet Explorer sürümleri en oluşur. Biz de Firefox bazı sürümlerinde oluşur. Ancak Chrome ve Safari bu davranış, ABD -webkit bu yama bir tür olduğuna inanıyorum yol gösterme.


Sorunu yeniden oluşturmak için ihtiyacımız olan bir hata olarak göndermek mümkün kod az miktarda kullanıyor. Yani, benim diğer soru, buraya transfer transparent vs kullanarak bir benzetme de kullanıyoruz ne olur rgba(0,0,0,0), ve.

Şeffaf

@keyframes spin{
	0% {transform:rotateZ(0deg);}
	50% {transform:rotateZ(360deg);border-radius:60%;}
	100%{transform:rotateZ(720deg);}
}
.spinme{
	display:inline-block;
	position:relative;
	left:0;
	top:0;
	margin:0.2rem;
	width:0.8rem;
	height:0.8rem;
	border:0.2rem solid black;
	border-radius:0%;
	outline: 1px solid transparent;
	transform:rotateZ(0deg);
	animation: spin infinite 4s;
}
<div class="spinme"></div>

RGBA(0,0,0,0)

@keyframes spin{
	0% {transform:rotateZ(0deg);}
	50% {transform:rotateZ(360deg);border-radius:60%;}
	100%{transform:rotateZ(720deg);}
}
.spinme{
	display:inline-block;
	position:relative;
	left:0;
	top:0;
	margin:0.2rem;
	width:0.8rem;
	height:0.8rem;
	border:0.2rem solid black;
	border-radius:0%;
	outline: 1px solid rgba(0,0,0,0);
	transform:rotateZ(0deg);
	animation: spin infinite 4s;
}
<div class="spinme"></div>

Her ikisi de

@Andyb tarafından belirttiği gibi, ayrı unsurları hem kullanırken garip hareketleri var. İkisi de ancak bocalama, bir tek beklenir. Gösterildiği gibi:

@keyframes spin{
  0% {transform:rotateZ(0deg);}
  50% {transform:rotateZ(360deg);border-radius:60%;}
  100%{transform:rotateZ(720deg);}
}
.spinme{
  display:inline-block;
  position:relative;
  left:0;
  top:0;
  margin:0.2rem;
  width:0.8rem;
  height:0.8rem;
  border:0.2rem solid black;
  border-radius:0%;
  outline: 1px solid rgba(0,0,0,0);
  transform:rotateZ(0deg);
  animation: spin infinite 4s;
}
.spinme:nth-of-type(2){
  outline: 1px solid transparent;
}
<div class="spinme"></div>
<div class="spinme"></div>


Internet Explorer bu test edemez olanlar için, burada bir animasyon .sorunun gif:

Comparison in an animated .gif

Bu sağdan hem soldan transparent rgba.


Başvuru yanlış anladım Abhitalks @tarafından belirttiği gibi, ancak aşağıda zaten bu olasılığı kabul ettiğimizi göstermek için, söz konusu bırakacağım, ya da bir şey kaçırdı diye/ardı.

Juan-c-v cevap her tarayıcıda transparent için hesaplanan değerini bulmak için bir test oluşturmaya karar verdim ve aşağıdaki ile geldi. @için teşekkürler

$('p').text($('p').css("background-color"));
p{background-color:transparent;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>

Eğer Chrome/Safari bu yapıyorsanız, o zaman büyük olasılıkla eğer olsaydı zaten yorum) rgba(0,0,0,0) göreceksiniz. YANİ ancak, muhtemelen transparent hala görürsünüz. MSDN başvuru okuyordum ve o buldu

Saydam anahtar sözcük desteklenmiyor.

Tarayıcılarda farklı sonuçlar ekran açıklıyor. Ancak transparent kendi sürümü olarak tanımlanan yerde açıklamıyor. W3c CSS1 ve CSS2 eski görüşler baktım ve eski bir tanım bulamadım. transparent ne anlama geliyor?

CEVAP
18 EYLÜL 2015, Cuma


temsil etmek() işlevi hesaplar renk ve şeffaflık için bir öğe, bu çok yararlı ne zaman kontrol renk ve alfa bir madde, özellikle istemiyorsan tamamen şeffaf. Bir işlevi, tarayıcı madde çizmek istediğim, bu CSS JS daha yakın olduğunu söylüyorsun.

Öte yandan, "şeffaf bir öğeyi tanımlayan bir CSS özelliği" tamamen şeffaf, renk ve alfa hesaplamaları yapmadan olacak. CSS özellik ve bir işlevi olmadığı için, her tarayıcı çok yöntem tarayıcı tarafından kullanılan bu özellik uygulamak için farklı olur, çok farklı bir şekilde uygulanır.

EDİT Tamam, cevabımı o çelişiyorum söylüyorlar:

şeffaf

Tamamen şeffaf. Bu kelime için bir kısaltma olarak kabul edilebilir şeffaf siyah, (0,0,0,0), hesaplanan değer olan temsil etmek.

Evet, aksini iddia eden yok. Bir şey şey W3C standart özellikleri ve bir şey daha farklı tarayıcıların geliştiricileri tarafından standart uygulamasıdır. YANİ kod bir bit yasadışı çünkü söylediğim şeyi kanıtlamak için mola, doğrudan Microsoft de adamlar kendi cevabını görmek istemeyeceğim.

Sana söylediklerimi şeffaf ve temsil etmek(0, 0, 0, 0) aynı şekilde idare edebiliyoruz. Şeffaf özelliği(0, 0, 0, 0) temsil etmek işlevi daha büyük olduğu için(daha fazla temsil etmek senin gibi ()?)Ve büyük olasılıkla, YANİ temsil etmek (r, g, b, a) için etkili bir yöntem geliştirdiler için olsa da, hala şeffaf özelliği ile eski yöntemi kullanıyor.

Sen her zaman akılda tutulması gereken bir şeyhayır web tarayıcı 0 W3C standartlarına uygunbu yeni özelliğin en üreticinin belirli bir uzantısı eklenmesi gerekiyor(moz - y-, vs.)

Sence neden öyle saçma yazmak için aynı şeyi dört kez, ne zaman her şey olabilir çözüldü kullanarak standart özellik ve kendine cevap için değil aynı kullanın şeffaf ve temsil etmek (0, 0, 0, 0) YANİ.

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

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • arnejann

    arnejann

    3 Kasım 2007
  • dirkgently1

    dirkgently1

    13 NİSAN 2006
  • Mr. H

    Mr. H

    1 Temmuz 2012