web-dev-qa-db-ja.com

背景画像の上に半透明のカラーレイヤー？

私はDIVを持っていて、背景としてパターンを入れたいのですが。この模様は灰色です。なので、もう少し素敵にするために、私は透明な色の「レイヤー」を重ねたいと思います。以下は私が試したがうまくいかなかったものです。背景画像の上に着色層を重ねる方法はありますか？

これが私のCSSです：

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
cssbackground-imagebackground-color
177
Marc

ここにあります：

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

このためのHTML：

<div class="background">
    <div class="layer">
    </div>
</div>

内部に他の要素がない場合はもちろん、.backgroundクラスに幅と高さを定義する必要があります。

182
Johannes Klauß

私はこれが本当に古いスレッドであることを知っています、しかしそれはグーグルのトップに現れるので、ここに別の選択肢があります。

これは純粋なCSSであり、追加のHTMLを必要としません。

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

ボックスシャドウ機能には驚くほど多くの用途があります。

264
BevansDesign

CSS-Tricksから... z-indexを作成して擬似要素を追加せずにこれを実行するための1ステップの方法があります。

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

線形グラデーションと画像を使用することもできます。 http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

これは、線形グラデーション関数が背景スタックに追加されるImageを作成するためです。 https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

39
TorranceScott

次に、bg画像とその中のbg色のcontent要素を含むラッピング要素が必要です。

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

そしてcss：

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}
23
Sven Bieder

これを試して。私のために働きます。

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}
20
yaufaniadam

画像のカラープロファイルを制御できないときに、動的なオーバーレイテキストを読みやすくするためにスタイルを簡単にするために、色合いとグラデーションを画像に適用する方法としてこれを使用しました。あなたはz-indexについて心配する必要はありません。

HTML

<div class="background-image"></div>

SASS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

それが役に立てば幸い

12
d4ncer

考えられる解決策の包括的な概要については、 https://stackoverflow.com/a/18471979/193494 で私の答えを参照してください。

  1. 線形グラデーションで複数の背景を使う
  2. 生成されたPNGを持つ複数の背景
  3. 二次背景レイヤーとして機能する、擬似要素の後のスタイル。
5
Kevin C.

なぜそんなに複雑なのですか？パターンを透明にし、背景色を単色にするにするのがより簡単な方法を除いて、あなたの解決策はほとんど正しかった。 PNGには透明部分を含めることができます。そのため、レイヤーを70％に設定して画像を再保存することで、フォトショップを使用してパターンを透明にします。それならあなたはただ一つのセレクターを必要とします。クロスブラウザで動作します。

CSS：

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML：

<div class="background">
   ...
</div>

これが基本です。使用例は、backgroundからbackground-imageに切り替えたところですが、両方のプロパティは同じように機能します。

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}
<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div>
2
Hexodus

あなたは半透明なピクセルを使うことができます、そしてそれはあなたがbase64の中でさえ、例えば here を生成することができますこれは白50％の例です：

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;

  • アップロードせずに

  • 追加のHTMLなし

  • ローディングはボックスシャドーやリニアグラデーションより速いはずです

2
Fanky

これはcssだけを使ったもっと簡単なトリックです。

<div class="background"> </div>
    <style>
    .background {
      position:relative;
      height:50px;
      background-color: rgba(248, 247, 216, 0.7);
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); 
    }

    .background:after {
        content:" ";
        background-color:inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
    }

    </style>
1
Zortext