web-dev-qa-db-ja.com

CSSで背景画像に色を付けるにはどうすればよいですか？

CSSを使用して背景画像を設定しています。

html {
background-image: url('../img/cello.jpg');
background-attachment: fixed;
background-size: 100%;
}

ウェブサイトのページごとに異なる背景画像を用意する予定です。そのため、テキストを読みやすくすることが重要です。現在、読みやすいように、中央の#mainコンテンツボックスにこのように半透明の黒い背景があります。

#main {
background: rgba(0, 0, 0, 0.5);
}

ただし、私が本当にやりたいのは、背景画像全体にそのような半透明の背景を持たせることです。ブラックボックスは少し不格好に見えるからです。 HTMLドキュメント全体を含む<div id=#tint>を作成し、＃tintにrgba（0、0、0、0.5）を指定しようとしましたが、まったく機能しません。変更するものが何もないまたは、背景画像をまったく表示せずに背景全体を単純な灰色にすることができます。これは単に不可能ですか？

cssbackgroundtint
32
user1623053

私はあなたが探している半透明の背景を持つオーバーレイ要素（潜在的にdiv）を作成する必要があると思います。何かのようなもの：

.overlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}

そしてもちろん、ちょっとしたデモ： little link 。

17
Chris

シンプルな色合いにbackground-blend-modeを使用します

background-blend-mode cssプロパティを使用できます。

.background-tint {
  background-color: rgba(200,100,0,.5); // Tint color
  background-blend-mode: multiply;
}

背景画像のある任意の要素に配置すれば、準備完了です。

このプロパティは、最新のブラウザで十分にサポートされています[〜＃〜] not [〜＃〜]IE latest andエッジ（ プレビュー状態 はフラグで有効にできます）。非サポートブラウザーの場合は polyfill を使用できます。

実演デモ

別のオプション

フラットな線形グラデーションと複数の背景オーバーレイを使用する

.background-tint {
  background-image: 
    linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ),
    url('http://placehold.it/420')
}

これは最も広く使用されている手法だと思いますが、ハードコードされているという欠点があります。つまり、クラスを取得して要素に貼り付け、色合いを付けることはできません。

これを以下のような、より少ないまたは粗末なミックスインにすることができます：

less

.background-tint(@tint-color, @image-url) {
  background-image: 
    linear-gradient( @tint-color, @tint-color ),
    url( @image-url )
}

sass

@mixin background-tint($tint_color, $image_url) {
  background-image: 
    linear-gradient( $tint_color, $tint_color ),
    url( $image_url )
}

実演デモ

透明な背景を使用する

.background-tint { position: relative; }

.background-tint::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}

このメソッドには、ほとんどのブラウザーで動作するという利点があり、任意の要素に追加するNiceクラスにすぎません。欠点は、その要素内に何か他のものがある場合、何らかの位置付けposition: relativeが最適に機能するdivにラップする必要があることです。

例：

<div class="background-tint">
  <div class="u-relative">Some text here</div>
</div>

.u-relative { position: relative; }

ワーキングデモ

64
hitautodestruct

これは私にとってはうまくいきました：

https://css-tricks.com/tinted-images-multiple-backgrounds/

.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);
}

そして、別の答えに基づいて、以下のように既存の色でこれを行うことができます：

linear-gradient(
  fade(@brand-primary, 50%),
  fade(@brand-primary, 50%)
),
4
Chris Moschini

overlayプロパティになります https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlay しかし、これはドラフトです。頼らないで

1
yunzen

不透明度を試してください：

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
0
tahdhaze09