0

LPを作っておりそこでopacityで透明度操作することが必要だったのですが、背景にopacity加工がかからず透明にならない状態です
他の加工もうまくかからないのですが、この件どなたか解決策をご存知でしょうか?もしCSSだけで解決不可の問題でしたらJavascriptを使っていただいてもかまいませんので、どうぞよろしくお願いいたします。

body {
  animation: blackout 6s infinite;
  height:100vh;
  margin:0;
  padding:0;
}

@keyframes blackout {
  0% {
background:red;
opacity:1;
  }
  50% {
    background:blue;
opacity:0;
  }
  100% {
    background: red;
opacity: 1;
  }
}
<div>

</div>

2
  • 3
    HTML は実際のコードも div タグのみなのでしょうか?
    – cubick
    Commented 1月8日 6:52
  • ありがとうございました。ほかにもタグはあるのですが実際のコードを改変していても問題が起こったので最後に試していた状態をのせた次第です
    – Uarcin
    Commented 1月11日 0:11

2 件の回答 2

3

この回答は、通常不透明な白色とされているキャンバスが、opacity プロパティの変化の過程で透けて表示されない、という問題に対する回答です。もし質問への回答になっていない場合は無視してください。


HTML 文書において、body 要素に設定された background プロパティの計算値は、ルート要素である html 要素へ伝播され、本来の body 要素の background プロパティは初期値として扱われます[1]。これは、body 要素に指定した背景関連のプロパティは html 要素へ設定されたかのように振る舞う、ということを意味しています。

このことから、 body 要素に設定した background: red および background: blue の 2 つのスタイルは、html 要素へ設定されたかのように振る舞うと理解できます。仕様上、ルート要素である html 要素の背景はキャンバスの背景となります[2]。つまり、キャンバスの不透明な白色の背景は、body 要素から伝播された background プロパティによって上書きされるということです。これがキャンバスが opacity プロパティの変化の過程で透けて表示されない原因です。

この問題の解決策は、html 要素に明示的に背景を指定することです。今回は問題が生じませんが、body 要素で明示的に高さを設定する必要がある点に注意してください。

§ 2.11.2. The Canvas Background and the HTML <body> Element[1]

For documents whose root element is an HTML HTML element or an XHTML
html element [HTML]: if the computed value of background-image on the
root element is none and its background-color is transparent, user
agents must instead propagate the computed values of the background
properties from that element’s first HTML BODY or XHTML body child
element. The used values of that BODY element’s background properties
are their initial values, and the propagated values are treated as if
they were specified on the root element. It is recommended that
authors of HTML documents specify the canvas background for the BODY
element rather than the HTML element.

§ 2.11.1. The Canvas Background and the Root Element[2]

The background of the root element becomes the canvas background and
its background painting area extends to cover the entire canvas.
However, any images are sized and positioned relative to the root
element as if they were painted for that element alone. (In other
words, the background positioning area is determined as for the root
element.) The root element does not paint this background again, i.e.,
the used value of its background is transparent.

html {
  background-color: white;  /* 追加 */
}

body {
  animation: blackout 6s infinite;
  height: 100vh;
  margin: 0;
  padding: 0;
}

@keyframes blackout {
  0% {
    background: red;
    opacity: 1;
  }
  50% {
    background: blue;
    opacity: 0;
  }
  100% {
    background: red;
    opacity: 1;
  }
}
<div>

</div>

0

背景にopacity加工がかからず透明にならない

「透明になる」とはどのような状態を期待されているのでしょうか? 質問コードはbody要素を透明に操作していますが、透明になった結果何が見えることを期待していますか? Webブラウザーの裏側にいるデスクトップ背景が表示されることを期待されているのでしょうか? 当然ながらそのようなことはできません。

質問のコードをそのままに、操作対象をdiv要素とし、body要素の背景色を変えるとopacityは正しく機能していることが確認できます。

body {
  background: yellow;
}

div {
  animation: blackout 6s infinite;
  height: 100vh;
  margin: 0;
  padding: 0;
}

@keyframes blackout {
  0% {
    background: red;
    opacity: 1;
  }
  50% {
    background: blue;
    opacity: 0;
  }
  100% {
    background: red;
    opacity: 1;
  }
}
<div>

</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。