[解決済み] CSSで背景を暗くするには?
2022-07-25 23:07:21
質問
テキストを含む要素を持っています。私は不透明度を減少させるたびに、私は全体のボディの不透明度を減少させる。私はちょうど私が作ることができる方法はありますか?
background-image
を暗くするだけで、他のすべてを暗くしない方法はありますか?
background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
どのように解決するのですか?
画像のCSSに次のコードを追加するだけです。
body{
background:
/* top, transparent black, faked with gradient */
linear-gradient(
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.7)
),
/* bottom, image */
url(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2);
}
参考 linear-gradient() - CSS | MDN
UPDATE: すべてのブラウザがRGBaをサポートしているわけではないので、「予備色」を用意しておくとよいでしょう。この色は、ほとんどの場合、ソリッド(完全に不透明な)色になります。
background:rgb(96, 96, 96)
. 参考までに
ブログ
を参照してください。
関連
-
[解決済み] Bootstrap 3.3.7で改行する方法
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
iframeフレームワークの使用
-
[解決済み] CSSの背景画像を暗くする?重複
-
[解決済み] ジャンボトロンのセンター出しは?
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] <button> vs. <input type="button" />. Which to use?
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] HTMLにPDFを埋め込むおすすめの方法とは?
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] HTMLアンカーは'name'と'id'のどちらで作成するのが良いですか?
-
[解決済み] Do I use <img>, <object>, or <embed> for SVG files?