53

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

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

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

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

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

4

5 に答える 5

114

background-blend-modeシンプルな色合いに使用

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

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

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

このプロパティは、IE 11を含まない最新のブラウザーで十分にサポートされています。サポートされていないブラウザーの場合は、ポリフィルを使用できます。

作業デモ

別のオプション

filter複雑な色合いに使用

filtercssプロパティを使用できます。

.background-tint {
  filter: sepia(100%) saturate(200%) brightness(70%) hue-rotate(330deg);
}

背景画像のある要素に配置すれば、準備は完了です。色を変更するには、hue-rotate値を変更します。

このプロパティは、IE11を含まない最新のブラウザーで十分にサポートされています。

作業デモ

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

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

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

これをlessまたはsassミックスインにすることができます。

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);
}

このメソッドには、ほとんどのブラウザーで機能するという利点があり、任意の要素に追加するだけの優れたクラスです。欠点は、その要素の中に何か他のものがある場合、ある種の配置でdivでラップする必要があるということですposition: relative。

例：

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

.u-relative { position: relative; }

作業デモ

于 2016-02-03T12:40:55.107 に答える
24

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*/
}

そしてもちろん、小さなデモ：小さなリンク。

于 2012-08-24T16:32:01.693 に答える
7

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

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%)
),
于 2015-09-21T19:33:26.930 に答える
1

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

于 2012-08-24T16:19:18.360 に答える
0

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

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
于 2012-08-24T16:00:02.190 に答える