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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

2回答

722閲覧

背景画像を薄く白くすることが全然できません。。

gunma_user

総合スコア12

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2017/09/07 13:33

背景画像に対して薄く白くするためにbackgro-colorをあてたいです。
しかしそれをあてると背景画像自体がそちらに置き換わってしまい画像が見えなくなります。

また、グラデーションも当てたいです。
しかし、それも全く同じ理由により背景画像が消えてしまいます。
消えるというかグラデーションの後ろに隠れてしまうようです。

どうしたら実現できるのでしょうか。
ただ、opacityを使うことは諸事情によりできません。
rgbaを使って実現したいです。
しかしrgbaのaの値を1より小さくしても全然透過してくれません。。
とても困っていて助けていただきたいです。
よろしくお願いいたします。

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

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

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

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

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

yoshinavi

2017/09/07 15:32

「rgbaが効かない状況」等が分かるように、ソースコードの提示が解決への早道かと思います。
guest

回答2

0

ベストアンサー

背景画像に対して薄く白くするためにbackgro-colorをあてたいです。

以下のように行うことができると思います。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 .box { 8 position: relative; 9 width: 150px; 10 height: 150px; 11 background: rgba(255, 255, 255, .5) url("http://placehold.jp/3d4070/ffffff/150x150.png?text=image"); 12 } 13 14 .box::before { 15 position: absolute; 16 top: 0; 17 right: 0; 18 bottom: 0; 19 left: 0; 20 content: ' '; 21 background-color: inherit; 22 } 23 </style> 24</head> 25<body> 26<div class="box"></div> 27</body> 28</html>

また、グラデーションも当てたいです。

以下のように行うことができると思います。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 .box { 8 width: 150px; 9 height: 150px; 10 background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url("http://placehold.jp/3d4070/ffffff/150x150.png?text=image"); 11 } 12 </style> 13</head> 14<body> 15<div class="box"></div> 16</body> 17</html>

投稿2017/09/07 13:49

s8_chu

総合スコア14731

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

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

gunma_user

2017/09/10 01:59

お礼が遅くなりすみません。。 backgroundプロパティを使うのと疑似要素を使えばよかったんですね! 本当に助かりました。 このたびは誠にありがとうございました。
guest

0

背景画像に対して薄く白くするためにbackgro-colorをあてたいです。

そのやり方では無理です。背景画像と背景色を両方描画することになるので、背景がより濃くなる方向にしかなりません。

背景画像自体を透過させたいなら、opacity以外にはfilterがあります。

投稿2017/09/07 13:43

編集2017/09/07 13:43
maisumakun

総合スコア145121

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問