web-dev-qa-db-ja.com

rgba（0,0,0,0）とtransparentの違いは何ですか？

他の質問の1つ で、レンダリングの問題を修正するための解決策は、_transparent._ではなく値rgba(255, 255, 255, 255)を使用することでした__を使用してテストしましたrgba(0, 0, 0, 0)これで問題が修正されました。つまり、エラーの原因はtransparentの定義です。ただし、transparentの-​​ W3C CSS3仕様 （および MDNリファレンス ）を見ると、rgba(0, 0, 0, 0)およびtransparentがわかります。等しくなければなりません：

透明

完全に透明です。このキーワードは、計算された値である透明な黒rgba（0,0,0,0）の省略形と考えることができます。

だから何を与えるのですか？どうやら、一見同じように2つの値で異なる結果が得られるのですか？ RGBAの formatting を調べ、同様の質問を探しました（役に立たない）。 transparentからrgba(0,0,0,0)への変換について言及するすべての質問/回答には、常に「すべき」または「一致する」という単語が含まれています（例 here ）。実際の違いは何ですか、なぜ出力がそれほど変化するのですか？

N.B：これは、すべてではないにしても、ほとんどのバージョンのInternet Explorerで発生します。また、Firefoxの一部のバージョンで発生することもわかっています。ただし、ChromeおよびSafariではこの動作が表示されないため、_-webkit_にはこのようなパッチがあると思われます。

これをバグとして送信するには、最小限のコードを使用して問題を再現する必要があります。ですから、私の別の質問から転送して、transparentと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で指摘されているように、別々の要素で両方を使用すると奇妙な動作が発生します。 1つだけがぐらつくと予想しますが、どちらもぐらつきます。示されているように：

_@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を以下に示します。

Comparison in an animated .gif

これは、左側にtransparent、中央にrgba、右側に両方あります。

@ Abhitalksによって指摘されたように、私は参照を誤って読みましたが、私はすでにこの可能性を検討したことを示すため、または何かが見落とされている/見落とされている場合に備えて、以下を質問に残します（

@ juan-c-vの回答のおかげで、各ブラウザで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はどういう意味ですか？

cssinternet-explorercolorscomputed-style
62
jaunt

rgba（）は、アイテムの色と透明度を計算する関数です。特に、完全に透明にしたくない場合は、アイテムの色とアルファを制御するときに非常に役立ちます。関数であるため、ブラウザーにアイテムを描きたい色と透明度を正確に伝えます。これはCSSよりもJSに近いものです。

一方、「透明」は、色やアルファを計算せずにアイテムが完全に透明になることを示すCSSプロパティです。関数ではなくCSSプロパティであるため、ブラウザごとに異なる方法で適用されるため、このプロパティを適用するためにブラウザで使用される方法とは大きく異なります。

[〜＃〜] edit [〜＃〜] OK、あなたは私の答えでそれと矛盾すると言います：

トランスペアレント

完全に透明です。このキーワードは、計算値である透明な黒のrgba（0,0,0,0）の省略形と考えることができます。

まあ、私はそれと矛盾しないでください。 1つはW3C標準の仕様であり、もう1つはさまざまなブラウザーの開発者によるその標準の実装です。 IEのコードを改ざんすることはしません。私が言っていることを証明するためです。これは少し違法なので、Microsoftの担当者に直接答えを見てもらいます。

私があなたに言ったことは、それらは同じように透明とrgba（0、0、0、0）を処理しないブラウザだということです。これは、透過プロパティがrgba（0、0、0、0）関数よりもはるかに古いためです（rgba（）よりも好きですか？） 、そしておそらく、IEはrgba（r、g、b、a）のための効果的なメソッドを開発しましたが、彼らはまだ透明なプロパティを持つ古いメソッドを使用しています。

常に心に留めておく必要があることの1つは、W3C標準を100％に満たすWebブラウザーはないです。そのため、ほとんどの新しいプロパティでは、メーカーの特定の拡張子を追加する必要があります（moz- webkit-など）

標準のプロパティを使用してすべてが解決されるのに、同じことを4回書くのがそれほどばかげている理由を考えてください。透明とrgba（0、0、0、 0）IEで。

7
Juan C. V.

Windows 7 OSを実行しているラップトップにインストールされているChromeの値transparentのコードを試してみました。

自分でぐらつきはまったくありません。そのため、この問題は、特定のブラウザーとOSが要素のレンダリングを決定する方法に基づいて、特定のブラウザーとオペレーティングシステムに固有のものであると考えています。

この問題は、ブラウザがハードウェアアクセラレーションを使用しているかどうかに関係している可能性があります。これで、ブラウザにハードウェアアクセラレーションを強制的に使用させるトリックがあります。ブラウザに3D変換が要素に適用されていると思わせるようにします。

要素に次のプロパティを追加することで、これを行うことができます。

.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 */
}

これでtransparentを使用したときの揺れの問題が修正されるかどうかは完全にはわかりませんが（問題を再現できないため）、この「ハック」を適用すると、理論上常に最もスムーズなレンダリングが得られます。例えばチェックしてください。 この記事 詳細については。

だからあなたのデモコードのために、あなたはこれで終わるでしょう：

@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>

フィドル：

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

5
John Slegers

私の意見では、同じIDを2回使用することは良いことではありません。また、CSSのanimationに一致する同じIDを持っているため、両方がアニメーションを表示するのは奇妙なことではありません。

_#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;
}
_

あなたがこれをするなら、たった1つのぐらつき、そしてそれは私にとって完全に理にかなっています。多分それはtransparent問題についてのあなたの質問に答えませんが、とにかくそれが本当に問題であるかどうかはわかりません。

編集どちらの色を試しても、transparentまたはrgba(0,0,0,0)を組み合わせてSafariでアニメーション化します。

3
Bas van Stein