rgba (0,0,0,0)과 투명의 차이점은 무엇입니까?

rgba (0,0,0,0)과 투명의 차이점은 무엇입니까?

---

에서 내 다른 질문 중 하나 , 렌더링 문제를 해결하는 솔루션이 값을 사용하여이었다 rgba(255, 255, 255, 255)대신 transparent.우리는 사용하여 테스트 rgba(0, 0, 0, 0)하고이 아직도의 정의입니다 즉, 문제를 해결 transparent하는이 오류가 발생합니다. 그러나 W3C CSS3 사양 (및 MDN 참조 )을 transparent살펴보면 다음 rgba(0, 0, 0, 0)과 transparent같아야합니다.

투명한

완전히 투명합니다. 이 키워드는 계산 된 값인 투명한 검정 rgba (0,0,0,0)의 약자로 간주 할 수 있습니다.

그래서 무엇을 제공합니까? 겉보기에 동일한 두 값이 다른 결과를 생성하는 이유는 무엇입니까? 내가 살펴본 형식 RGBA, 그리고 (소용)과 비슷한 질문을 찾았다. 에서 변환을 언급 모든 질문 / 대답 transparent에 rgba(0,0,0,0)항상은 또는 '따라'에서 '해야한다'는 말씀이 있습니다. (예를 들어 여기 ). 실제 차이점은 무엇이며 출력을 그렇게 많이 변경하는 이유는 무엇입니까?

주의 : 이것은 Internet Explorer의 전부는 아니지만 대부분의 버전에서 발생합니다. 또한 일부 버전의 Firefox에서 발생한다는 것을 알고 있습니다. 그러나 Chrome과 Safari는 이러한 동작을 표시하지 않으므로 .NET Framework에 대한 일종의 패치가 있다고 믿게됩니다 -webkit.

---

이것을 버그로 제출하려면 최소한의 코드를 사용하여 문제를 재현해야합니다. 그래서, 내 다른 질문에서 옮겨졌습니다. 여기에 transparentvs 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 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>

양자 모두

@andyb이 지적했듯이 두 가지를 별도의 요소에서 사용할 때 이상한 동작이 있습니다. 하나만 흔들 리기를 기대하지만 둘 다 그렇습니다. 입증 된 바와 같이 :

@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에서 이것을 테스트 할 수없는 사람들을 위해 다음은 문제의 애니메이션 .gif입니다.

이것은 transparent왼쪽, rgba중간 및 오른쪽 모두에 있습니다.

---

@Abhitalks가 지적했듯이 참조를 잘못 읽었지만 우리가 이미이 가능성을 고려했거나 무언가를 놓치거나 간과 한 경우를 보여주기 위해 질문에 아래를 남겨 둘 것입니다.

@ juan-cv의 답변 덕분 transparent에 각 브라우저에서 계산 된 값을 찾는 테스트를 만들기로 결정 했고 다음을 생각해 냈습니다.

$('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>

Chrome / Safari에서이 항목을보고 있다면 (보이지 않는 경우 주석)이 표시 될 것 rgba(0,0,0,0)입니다. 그러나 IE에서는 transparent여전히 볼 수 있습니다. MSDN 참조를 읽고 다음 을 발견했습니다.

transparent 키워드는 지원되지 않습니다.

브라우저가 다른 결과를 표시하는 이유를 설명합니다. 그러나 transparent실제로 정의 된 버전이 무엇인지 설명하지 않습니다 . 이전 CSS1 및 CSS2 w3c 사양을 살펴 보았지만 이전 정의를 찾을 수 없었습니다. 무슨 transparent뜻이야?

---

rgba ()는 항목의 색상과 투명도를 계산하는 함수로, 항목의 색상과 알파를 제어하고 싶을 때, 특히 완전히 투명하지 않으려는 경우 매우 유용합니다. 함수이기 때문에 항목을 그리는 데 정확한 색상과 투명도를 브라우저에 알리는 것입니다. 이것은 CSS보다 JS에 더 가깝습니다.

반면에 "투명"은 색상과 알파를 계산하지 않고 항목이 완전히 투명하다는 것을 식별하는 CSS 속성입니다. 함수가 아닌 CSS 속성이기 때문에 각 브라우저는이를 다른 방식으로 적용하므로 브라우저에서이 속성을 적용하는 데 사용하는 방법과 많이 다릅니다.

편집 좋아, 당신은 내 대답에 모순된다고 말합니다.

투명한

Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.

Well, i dont contradict that. One thing thing is the specification of the W3C standard, and another thing is the implementation of that standard by developers of different browsers. I will not break the code of IE to prove what I'm saying, because it's a bit illegal, directly ask the guys at Microsoft to see their answer.

What I've told you is that they are browsers that do not handle transparent and rgba(0, 0, 0, 0) in the same way. That's because the transparent property is much older than the rgba(0, 0, 0, 0) function (you like that more than rgba ()?), And most likely, while for IE have developed an effective method for rgba (r, g, b, a), they are still using the old method with the transparent property.

One thing you always have to keep in mind is that no web browser meets the W3C standards to 100%, that is why in most of the new property must be added the specific extension of the manufacturer (moz- webkit-, etc)

Think why it is so absurd to write the same thing four times, when everything would be solved using the standard property, and yourself will answer because it is not the same to use transparent and rgba (0, 0, 0, 0) in IE.

---

I've been trying your code for the value transparent in Chrome, installed on a laptop running Windows 7 OS.

I'm not getting any wobble whatsoever myself. So I expect this issue is specific for certain browsers and operating systems based on how that specific browser and OS decide to render your element.

This issue could be related to whether or not your browser uses hardware acceleration. Now, there is a trick to force your browser to use hardware acceleration : make your browser think that a 3D transformation is being applied to an element.

You could to that by adding the following properties to your element :

.fake3Dtransformation {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

While I'm not entirely sure if this will fix the wobbling issue when using transparent (as I'm not able to reproduce the issue), applying this "hack" should in theory always give you the smoothest rendering. Check out eg. this article for more information.

So for your demo code, you'd end up with this :

@keyframes spin{
    0% {transform:rotateZ(0deg);}
    50% {transform:rotateZ(360deg);border-radius:60%;}
    100%{transform:rotateZ(720deg);}
}
#spinme{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    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);
    animation: spin infinite 4s;
}

#spinme:nth-of-type(2){
    outline: 1px solid transparent;
}

<div id="spinme"></div>
<div id="spinme"></div>

---

THE FIDDLE :

https://jsfiddle.net/z2r7ypy7/4/

---

In my opinion, it is not good to use the same id twice, whatever you are doing, it is meant as an identifier. I also do not find it weird that they both show the animation, since both of them have the same id that match the animation in the css.

#spinme{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    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);

}

#spinme:nth-of-type(1){
    animation: spin infinite 4s;
}

이렇게하면 하나만 흔들리고 제게는 완벽합니다. 아마도 그것은 문제에 대한 귀하의 질문에 대한 답변이 아니지만 그것이 transparent실제로 문제인지 확실하지 않습니다.

편집 아니오 문제가되는 컬러 나는 시도, transparent또는 rgba(0,0,0,0)사파리에 어떤 조합들은 모두 애니메이션.

참고 URL : https://stackoverflow.com/questions/32479188/whats-the-difference-between-rgba0-0-0-0-and-transparent