CSSでグラデーションの上にPNG画像を一緒に使う

ページ背景で、透過png画像とbackground / linar-gradientを同時に使うトリック。

electron 8で使えたのでchrome 78で有効なはず。




```
 13 html{¬
 14 >-------background: linear-gradient(-30deg, rgba(190, 255, 190, 1), rgba(215, 255, 215, 1));¬
 15 }¬
 16 body{¬
 17 >-------background: url("image/sky.png") center center / cover no-repeat fixed¬

 18 }¬

```

htmlタグに背景色、bodyに透過PNG画像。
最初はグラデーションと画像でcssファイルを分けていたのが有効化のトリックかとも思ったが、そうではなかった。

注意:
image/sky.pngはcssファイルからの相対パスになっていた。
```
index.html
css + style.css
    + image/sky.png
```


stackoverflowのコメントによると画像とグラデーションの同時利用は回答時点では仕様策定中と書いてあるのだと思う。
https://stackoverflow.com/a/10881460

0 件のコメント:

コメントを投稿

食洗機の分岐水栓をDIY工事はあきらめてお願いした(結果的によかった)

 食洗機の『プチ食洗(NP-TCR3)』を購入しました。 食洗機にはビルトイン・据え置き水栓・据え置きタンク式、がありますが、購入したのは水栓をつなげる必要がある機種です。 わたしが購入前に参考にしたブログでは『買って取り付ければ終了だよ』で、『分岐水栓を取り付ける必要があるけれ...