背景画像と色を一緒に使用できないのはなぜですか？

私がやろうとしているのは、background-colorとの両方を表示することですbackground-image。これにより、私の半分がdiv右側の影の背景画像を覆い、残りの左側が背景色を覆います。

しかし、を使用するbackground-imageと、色が消えます。

要素の背景として色と画像の両方を使用することは完全に可能です。

background-colorとbackground-imageスタイルを設定します。画像が要素よりも小さい場合は、background-positionスタイルを使用して右に配置し、background-repeatスタイルを使用して背景全体が繰り返されて覆われないようにする必要があります。

background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;

または複合スタイルを使用するbackground：

background: green url(images/shadow.gif) right no-repeat;

複合スタイルbackgroundを使用して両方を個別に設定した場合、最後のスタイルのみが使用されます。これが、色が表示されない理由の1つです。

background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;

要素の一部のみを覆うように背景画像を明確に制限する方法はないので、背景色を表示するには、画像が要素よりも小さいか、または透明領域があることを確認する必要があります。

画像に色を付けるには、CSS3 backgroundを使用して画像とをスタックしますlinear-gradient。以下の例では、linear-gradient実際のグラデーションなしでaを使用しています。ブラウザーはグラデーションを画像として扱い（実際にはビットマップを生成してオーバーレイすると思います）、したがって実際には複数の画像を積み重ねています。

background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;

あなたがpngを持っていたら、水色の色合いのグラフ用紙を生成します。重ね順はメンタルモデルとは逆に機能し、最初のアイテムが上になる場合があることに注意してください。

Mozillaによる優れたドキュメント、ここ：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

グラデーションを構築するためのツール：

http://www.colorzilla.com/gradient-editor/

注-IE11では機能しません！その理由がわかったときは、そのはずなので、アップデートを投稿します。

使用する

background:red url(../images/samle.jpg) no-repeat left top;

この回答に追加するには、画像自体が透明な背景であることを確認してください。

background-imageとをbackground-color一緒に使用する例を次に示します。

.box {
  background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px);
  width: 100px;
  height: 100px;
  margin: 10px 0 0 10px;
  display: inline-block;
}

<div class="box" style="background-color:orange"></div>
<div class="box" style="background-color:green"></div>
<div class="box" style="background-color:blue"></div>

実際には、背景画像で背景色を使用する方法があります。この場合、背景部分は白または透明の色ではなく、指定された色で塗りつぶされます。

そのためには、次のbackgroundようにプロパティを設定する必要があります。

.bg-image-with-color {
    background: url("example.png") no-repeat, #ff0000;
}

後のカンマとカラーコードに注意してくださいno-repeat。これはあなたが望む背景色を設定します。

このYouTube動画でこれを発見しましたが、そのチャンネルや動画とは何の関係もありません。

画像の半分を透明にして、背景色が透けて見えるようにします。

それ以外の場合は、コンテナーdivの50％を占める別のdivを追加して、左または右にフロートさせます。次に、画像または色を適用します。

Geckoは設定奇妙なバグがあるbackground-colorためhtmlセレクタがアップカバーするbackground-imageにもかかわらず、body要素のbody要素効果では、より大きなzのインデックスを持っており、あなたがすべき身体のを見ることができるようにbackground-image一緒にhtml background-colorシンプルなロジックに純粋に基づきます。

ヤモリバグ

以下は避けてください...

html {background-color: #fff;}
body {background-image: url(example.png);}

回避策

body {background-color: #fff; background-image: url(example.png);}

こんにちは、私はbackground-imageとbackground-colorを組み合わせる別の方法を試しました：

HTML

<article><canvas id="color"></canvas></article>

CSS

article {
  height: 490px;
  background: url("Your IMAGE") no-repeat center cover;
  opacity:1;
} 

canvas{
  width: 100%; 
  height: 490px; 
  opacity: 0.9;
}

ジャバスクリプト

window.onload = init();

var canvas, ctx;

function init(){
  canvas = document.getElementeById('color'); 
  ctx = canvas.getContext('2d'); 
  ctx.save();  
  ctx.fillstyle = '#00833d'; 
  ctx.fillRect(0,0,490,490);ctx.restore();
}

うまくいったかどうか教えてくださいありがとう

background:url(directoryName/imageName.extention) bottom left no-repeat; 
background-color: red;