main-img.jpgの上に不透明度を下げたグラデーションをかけたい

Question

main-img.jpgの上に不透明度を下げたグラデーションをかけたいのですが、うまくいきません。
不透明度のつけ方を教えてください。

＊16進数で指定した場合はサイトに不透明度を下記のように入れれば良いのではないのでしょうか？
background-image: linear-gradient(-45deg, #f00, #f0f 15%, #00f 33%, #0ff 49%, #0f0 67%, #ff0 84%, #f00, 0.5);

.top-header {
background: url(../img/common-img/main-img.jpg) no-repeat;
background-size: cover;
position: relative;
width : 100%;
height: auto;
padding-top: 57.2%;
box-shadow: 0.01rem 0.3rem 0.3rem rgba(0,0,0,.9);
background-image: -webkit-linear-gradient(-45deg, #f00, #f0f 15%, #00f 33%, #0ff 49%, #0f0 67%, #ff0 84%, #f00, 0.5);
background-image: -moz-linear-gradient(-45deg, #f00, #f0f 15%, #00f 33%, #0ff 49%, #0f0 67%, #ff0 84%, #f00, 0.5);
background-image: -o-linear-gradient(-45deg, #f00, #f0f 15%, #00f 33%, #0ff 49%, #0f0 67%, #ff0 84%, #f00, 0.5);
background-image: -ms-linear-gradient(-45deg, #f00, #f0f 15%, #00f 33%, #0ff 49%, #0f0 67%, #ff0 84%, #f00, 0.5);
background-image: linear-gradient(-45deg, #f00, #f0f 15%, #00f 33%, #0ff 49%, #0f0 67%, #ff0 84%, #f00, 0.5);
}

Answer 1

background-image: linear-gradient(-45deg, #f00, #f0f 15%, #00f 33%, #0ff 49%, #0f0 67%, #ff0 84%, #f00, 0.5);

linear-gradient()の書式として不正な形になっていますので正しく表示されないと思われます。
16進数は不透明色しか指定できませんので、アルファ値を扱いたいのであればrgba()で色指定しましょう。

ちなみに-webkit-付きの構文とW3C構文では、方向・角度の仕様が全く異なりますので、
同じように-45degとしてしまうと環境によってグラデーションの角度が変わってしまいます。
deg指定の場合の仕様の違いは覚えるのがなかなか面倒なので、
こちらのツールなどを使ってコードを出力された方が手っ取り早いと思いますよ。

Comments

[退会済みユーザー]

ありがとうございます。
なかなかここまで複雑だと良いサンプルや解説が見つからず上記をRGBAに変換できていませんでした。
下記が一番近いかと思っています。

background-image:
linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.4) 10%, rgba(255, 255, 255, 0.1)),

10%が色味を変更する敷居値と思ってよいでしょうか？
-45degは使えない環境もあるので別の記載が必要なのですね。

[aKusano]

>10%が色味を変更する敷居値と思ってよいでしょうか？
はいそうです。

>-45degは使えない環境もあるので別の記載が必要なのですね。
使えないのではなく、-webkit-等をつけた場合とつけなかった場合で、-45degの解釈が変わってしまうため、環境によって異なる角度で表示されてしまうということです。

ちなみに上下左右をキーワードで指定する場合であれば、

W3C標準：　to bottom　　→　プリフィクス付き：　top

のようになります。
同様に to top は bottom、　to left は right、 to right は left となります。

[退会済みユーザー]

linear-gradient()　rgba()　CSS3逆引きなどと調べ下記のような、
16進数の情報しか見つかりません。
http://shanabrian.com/web/css3/linear-gradient.php

・下記のように自分で作ってみたのですがやはりうまくいきません。
どこが違っているのでしょうか？

background:-webkit-linear-gradient(left top, rgb(193,226,227, 0.4) 22%, rgb(0,224,224, 0.4) 51%);
background:-moz-linear-gradient(left top, rgb(193,226,227, 0.4) 22%, rgb(0,224,224, 0.4) 51%);
background:-ms-linear-gradient(left top, rgb(193,226,227, 0.4) 22%, rgb(0,224,224, 0.4) 51%);
background:-o-linear-gradient(left top, rgb(193,226,227, 0.4) 22%, rgb(0,224,224, 0.4) 51%);
background:linear-gradient(to right bottom, rgb(193,226,227, 0.4) 22%, rgb(0,224,224, 0.4) 51%);

２．
background-image: linear-gradient(left , rgb(193,226,227, 0.4) 22%, rgb(0,224,224, 0.4) 51%);
background-image: -o-linear-gradient(left , rgb(193,226,227, 0.4) 22%, rgb(0,224,224, 0.4) 51%);
background-image: -moz-linear-gradient(left , rgb(193,226,227, 0.4) 22%, rgb(0,224,224, 0.4) 51%);
background-image: -webkit-linear-gradient(left , rgb(193,226,227, 0.4) 22%, rgb(0,224,224, 0.4) 51%);
background-image: -ms-linear-gradient(left , rgb(193,226,227, 0.4) 22%, rgb(0,224,224, 0.4) 51%);

[aKusano]

方向・角度の仕様がおかしくなってますよ。
background:linear-gradient(to right bottom, …略);
　→ to right bottom　などという指定はありません。左から右なら to rightです。

プリフィクス付きの方も方向・角度の記述が間違ってます。
background:-webkit-linear-gradient(left top, …略);
　→left top　旧-webkit-構文と混ざってます。左から右なら left です。

あとrgba()とすべきところが全部rgb()になってます…。
全てケアレスミスですね。落ち着いてコードを見直しましょう。

[退会済みユーザー]

16進数ですが、下記サイトに right bottomなどの記載があったので左上から右下のグラデーションはそのようにすると思ったのですが、違うのですね。
http://shanabrian.com/web/css3/linear-gradient.php

rgb指定の良い情報が見つからないのですが、良いサイトをご存知でしたら教えてください。

rgbaの件ありがとうございます。
確かにそれで表記はできたのですが、やはり背景の画像が見えなくなります。
透過しても背景の画像は見えない仕様なのでしょうか？

[aKusano]

>16進数ですが、下記サイトに right bottomなどの記載があったので左上から右下のグラデーションはそのようにすると思ったのですが、違うのですね。

それはAndorid 3.x以下とかのふるーい環境でグラデーションを表示させるための旧-webkit-構文です。グラデーションは仕様策定の経緯の関係で全部で3種類記述構文が存在するんですけど、旧-webkit-はさすがにもうサポートする必要が無いので忘れた方がいいと思います。

>確かにそれで表記はできたのですが、やはり背景の画像が見えなくなります。
透過しても背景の画像は見えない仕様なのでしょうか？

ここの記載されている記述ではグラデーションの記述しかなく、背景画像がどこにどのような形で書かれているのか分からないのでなんともいえません。

[退会済みユーザー]

ソースがなかったですね。すいません。

＞＞＞
.top-header {
background: url(../img/common-img/main-img.jpg) no-repeat;
background-size: cover;
position: relative;
width : 100%;
height: auto;
padding-top: 57.2%;
box-shadow: 0.01rem 0.3rem 0.3rem rgba(0,0,0,.9);
background:-webkit-linear-gradient(left top, rgba(193,226,227, 0.1) 22%, rgba(0,224,224, 0.1) 51%);
background:-moz-linear-gradient(left top, rgba(193,226,227, 0.1) 22%, rgba(0,224,224, 0.1) 51%);
background:-ms-linear-gradient(left top, rgba(193,226,227, 0.1) 22%, rgba(0,224,224, 0.1) 51%);
background:-o-linear-gradient(left top, rgba(193,226,227, 0.1) 22%, rgba(0,224,224, 0.1) 51%);
background:linear-gradient(to right bottom, rgba(193,226,227, 0.1) 22%, rgba(0,224,224, 0.1) 51%);
}

とりあえず記載させていただきました。

[退会済みユーザー]

WEBは進歩が早いのでベンダープリフィックスが、どこまで必要か、どの記載が今良いかなど、どこを信じてよいかわかりませんね。
いったいどのサイトで判断されているのでしょうか？

・私の場合と質問
caniuseでSupportedなら、不要。
Partial Supportなら、どこのサイトで確認しますか？

またIEはどのバージョンまで必要か歯っ切るする場合が多いですが、その他のブラウザは、下記で言うと、黒い枠線で囲まれているバージョンが、問題ないようにすれば、
それで良いという事で、特別に指定がない場合は問題ないでしょうか？
http://caniuse.com/#search=Gradients

[aKusano]

＜グラデと背景画像が共存できない問題＞
.top-header {
background: url(背景画像);
background: linear-gradient(グラデーション指定);
}
↑こう書いたら、グラデーションしか表示されないのは当然ですね。
最初に背景画像を指定して、後から同じセレクタにグラデーションを指定してますので
上書きされてグラデーションしか出ません。
同じセレクタに背景画像とグラデーションを両方設定したければ、
複数背景画像指定をする必要があります。

.top-header {
background: linear-gradient(グラデーション指定), url(背景画像);
}

カンマで複数指定した場合、最初に設定した値が上、次に指定した値が下になりますので、上記の指定でグラデの下に背景画像が表示される設定となります。値をつける順番を逆にすると画像が上になってグラデが隠れてしまうので注意です。

＜プリフィックスどこまで問題＞
基本的にはクライアントとの取り決めに従います。
自由にやっていいなら、IEは11以上、
Safari, chrome, Firefox, Edgeは制作時点での最新版のみ、
iOSは現行の2バージョン前まで、
Androidは今のところ4.4以上としています。
それ以下の環境については要請がない限りサポートしませんので、
古すぎるプリフィックスも付けてません。
Andoridについてはユーザー数の割合をチェックして、1%切ってくるあたりからサポートを外すようなイメージですかね。

＜rgbのグラデサンプルが見つからない問題＞
rgba()を使ったグラデーションのコードサンプルを探そうとしてもなかなか見つからないですし、それを探そうとすること自体ナンセンスです。

・グラデーション構文の正しい仕様
・rgba()の正しい仕様

この２つがそれぞれ分かれば、後は16進数色になっている部分をrgba()で置き換えれば済みますよね？

[退会済みユーザー]

グラデーション構文の正しい仕様はMDNで見ますか？
W3Cですか？
W3Cは、わかりにくいですが、情報更新がしっかりしていってもう少し初心者にもわかりやすい所があればありがたいです。

MDNを見たのですが45degを使っているので、こちらも情報は古いということでよいでしょうか？
https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient

[退会済みユーザー]

下記にもよい情報はないですね。
http://www.hcn.zaq.ne.jp/___/WEB/css-images-ja.html#funcdef-linear-gradient

[aKusano]

すみません、MDNを見る限り　to bottom right　という指定は仕様的に正しい記述のようですね。失礼いたしました。

グラデーションの仕様は大変分かりづらいですよね。仕様で定められたものとベンダーの実装でまた微妙に違いもあるようですし。。。
W3Cの仕様書は読み方をちゃんと勉強しないと理解できないので、
個人的にはCSS3のリファレンス的な書籍で確認をしています。
なので、書籍で解説が省かれている部分については正直あまり良く知りません。
よく使う上下、左右のグラデーション以外についてはツールで書き出してしまいますね(^_^;)

[退会済みユーザー]

ありがとうございました。

下記でできました。
下記なら、-45regと違って問題ないのですね。
background: transparent linear-gradient(to right bottom, rgba(0, 255, 255, 0.4), rgba(0, 0, 255, 0.4) 15%, rgba(0, 255, 255, 0.4)) repeat scroll 0% 0%;

W3C、モジラの解説はわかりにくく、その他のサイトは物足りない感じですね。
やはり、書籍が良いのですね。
中古だとまだ変更が激しいので、高くても去年出版以上の本を購入するしかないですかね。