CSS 背景画像の端だけにグラデーション

CSSで
linear-gradientを使い、3色（白→透明→白）のグラデーションをかけようとおもったのですが、
linear-gradientはrgbaの記述には対応していないようで、表示されません。

何かいい方法がありましたら教えていただきたいです。
よろしくお願い致します。

現在のコード

.box{
    background:url(_img/bg.gif)repeat;
    width: 100%;
    background: -moz-linear-gradient(to bottom,#fff,rgba(255,255,255,0) 30%,#fff); 
    background: -webkit-linear-gradient(to bottom,#fff,rgba(255,255,255,0) 30%,#fff); 
    background: linear-gradient(to bottom,rgba(255,255,255,0.5),rgba(255,255,255,0) 30%,rgba(255,255,255,0.5)); 
}

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

回答3件

ベストアンサー

background-imageは重ねることは出来ますが、書き方が違います。

CSS
1.box{
2    width: 100%;
3    height: 100vh;
4    background-image: linear-gradient(to bottom,rgba(255,255,255,.8),rgba(255,255,255,0) 30px,rgba(255,255,255,0) calc(100% - 30px),rgba(255,255,255,.8))
5        ,url(https://placehold.jp/24/99cc99/339933/350x150.png?text=placehold)
6        ; 
7}
8```[https://jsfiddle.net/0rw3hdza/](https://jsfiddle.net/0rw3hdza/)
9
10---
11
12【CSS での複数の背景の利用方法 - CSS: カスケーディングスタイルシート | MDN】
13[https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds)
14
15【CSSで背景画像を複数設定する | cly7796.net】
16[http://cly7796.net/wp/css/sets-a-plurality-of-background-image-in-css/](http://cly7796.net/wp/css/sets-a-plurality-of-background-image-in-css/)
17
18【backgroundまとめ。ショートハンド、複数指定、各プロパティ - Qiita】
19[https://qiita.com/katsunory/items/1e952d3f5ab2a0306c4d](https://qiita.com/katsunory/items/1e952d3f5ab2a0306c4d)

投稿2018/11/29 04:00

kei344

総合スコア69625

aki0923f

2018/11/29 04:07

こういうふうにかけると知りませんでした！目からうろこでした

退会済みユーザー

2018/11/30 00:13

どうもありがとうございました！

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

背景画像の上下だけグラデーションで消したい場合、背景画像を指定した .box にlinear-gradientをかけて端を消すということはできません。

ですので、.boxの疑似要素を使用して

::beforeと::afterにはlinear-gradientで透明→白のグラデーションのかかった要素を作成する。
::beforeを.boxの上部、::afterを.boxの下部にpositionで配置する

とすることで、だんだん画像が消えるように見せる事ができます。

▼サンプル
https://codepen.io/aki0923f/pen/mQQbqP

投稿2018/11/29 03:46

編集2018/11/29 03:46

aki0923f

総合スコア84

退会済みユーザー

2018/11/30 00:13

サンプルもいただいて、ありがとうございました！

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

効きますよ？

サンプルコード

html
1  <div class="box">
2    <div class="inner"></div>
3  </div>

css
1.box{
2    width: 100%;
3    height: 100px;
4    background: linear-gradient(to bottom,rgba(100,255,255,1),rgba(100,000,255,0) 30%,rgba(255,255,100,0.5));
5    position: relative;
6  }
7
8  .inner {
9    width: 50%;
10    height: 100px;
11    position: absolute;
12    background: #000;
13    z-index: -10;
14  }