透過画像背景の下にCSSアニメーションさらに下に背景色を重ねたい

実現したい事

一番下：背景色
真ん中：CSSアニメーションで流れ星
一番上：背景透過させた下の画像

この3つを重ねて星が流れているように見せたい。

試したこと

body {
  background: url(../img/background.png), linear-gradient(#44899b, #72e2ed);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

これでこうなりはするのですが当然、背景色と画像の間にCSSの要素を置くことは出来ません..。
星のアニメーションは個人的に作成するとして、間にCSSの要素を置く方法をご教授頂きたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

背景画像とグラデーションを分けて、疑似要素で指定してみるのはどうでしょうか。
下のサンプルでは流れ星を::afterで作成した場合、重ね順をz-indexで調整しています。
流れ星をhtmlの要素で作る場合は、普通に<div class="star">★</div>みたいな感じで作成しています。

css
1body {
2  position: relative;
3  height: 100vh;
4  background: linear-gradient(#44899b, #72e2ed);
5}
6
7/* 背景画像 */
8body::before {
9  content: '';
10  position: absolute;
11  z-index: 20;
12  width: 100%;
13  height: 100%;
14  background: url(../img/background.png) center center / cover no-repeat fixed;
15}
16
17/* 流れ星（サンプル） */
18body::after {
19  position: absolute;
20  top: 0%;
21  left: 20%;
22  z-index: 10;
23  color: #ff0; 
24  content: '★';
25  font-size: 300px;
26}
27
28.star {
29  position: absolute;
30  bottom: 10%;
31  right: 20%;
32  color: #ff0; 
33  font-size: 300px;
34}

<body>
  <div class="star">★</div>
</body>

投稿2019/10/17 22:53

takopo

総合スコア484

carly

2019/10/18 06:56

理想的な状態にすることが出来ました！ before, afterにz-indexを指定するのはとても勉強になりました。あとは上下左右に10pxほどの空白が出来ていたのでmargin:0;をbodyに付けました。ありがとうございました！

takopo

2019/10/18 08:45

無事解決できて良かったです！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

透過画像背景の下にCSSアニメーションさらに下に背景色を重ねたい

実現したい事

試したこと

関連した質問