質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1102閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/11/29 01:04

編集2018/11/29 01:11

イメージ説明
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)); }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aki0923f

2018/11/29 04:07

こういうふうにかけると知りませんでした!目からうろこでした
退会済みユーザー

退会済みユーザー

2018/11/30 00:13

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

0

背景画像の上下だけグラデーションで消したい場合、背景画像を指定した .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

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

0

効きますよ?

サンプルコード

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 }

投稿2018/11/29 03:04

akihiro3

総合スコア955

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/11/30 00:13

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問