web-dev-qa-db-ja.com

背景画像の明るさを変更しますか？

次の明るさを変更できるかどうか疑問に思っています。

 body{
 background-image:url();
 }

HTML/CSSを使用します。変更したいのは、画像を作成するのにかなり長い時間を費やしたからですが、ウェブサイトに置くと突然約2倍の明るさになります。元のファイルとWebサイトに入力されたファイルを比較しましたが、どちらも非常に異なる青色です。

これには理由がありますか？また、明るさを変更する方法はありますか？

ありがとう。

htmlcssimagebackgroundbrightness
18
user3227878

これはオプションですが、あまり実用的ではなく、古いブラウザーでは機能しません。

_body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: rgba(0,0,0,0.1);
  pointer-events: none;
}
_

または、さらに優れた色制御のために、hsla()色を試してください：

_body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: hsla(180,0%,50%,0.25);
  pointer-events: none;
}
_

本当に、目的のブラウザー結果が得られるまで、イメージエディターでイメージを操作することをお勧めします。

20
ralph.m
_background:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(myimage.png);
_

これにより、元の画像の上に50％の白が配置されます。

線形勾配関数を使用する必要があります。使用しないと機能しません。

または、次を使用できます。

.someObj:after{ content:''; background:rgba(255,255,255,.5); .... }

そして、これはコードの保守性のために優れています。

8
Martin Zvarík

すべてのブラウザーで機能するこれを行う方法はありませんが、必要に応じて、filterスタイルを使用して、Webkitブラウザー（Chrome、Safari、Opera）で実行できます。

img.lessBright {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}

その結果、Webkitブラウザーの明るさが80％に低下します。ただし、これを行う場合は、画像の別のバージョンを保存することをお勧めします。

5
Joeytje50