このパネルを選択している場合は、青色のパネルがあります（クリックしてください）。さらに、そのパネルに小さな記号（.pngイメージ）を追加します。これは、選択したパネルが以前に選択されたことを示します。CSS：背景色の背景画像
たとえば、ユーザーが10個のパネルを表示し、そのうちの4個にこの小さな記号がある場合、彼は以前にそれらのパネルを既にクリックしたことを知っています。これまでのところうまく動作します。問題は、小さなサインを表示できず、同時にパネルを青くすることができないことです。
パネルを青色に設定するには、CSS background: #6DB3F2;と背景画像をbackground-image: url('images/checked.png')と設定します。しかし、それは背景色が画像の上にあるように見えるので、あなたはその標識を見ることができません。
z-index esを背景色と背景画像に設定することはできますか？
あなたはそれぞれの完全なプロパティ名を使用する必要があります。
background-color: #6DB3F2;
background-image: url('images/checked.png');
それとも、あなたが背景速記を使用して、1行ですべてを指定することができます。
background: #6DB3F2 url('images/checked.png');
本当に面白い問題、避難所まだ見たことがない。このコードは私のためにうまく動作します。
background-color: #6DB3F2;
background-image: url('images/checked.png');
をしかし、その代わりに、それは他の方法で働い：クロムとIE9
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}
でそれをテストした私にとって、このソリューションはうまくいかなかった
<div class="block">
<span>
...
</span>
</div>
CSSを：
.block{
background-image: url('img.jpg') no-repeat;
position: relative;
}
.block::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
コードFranciscありがとう！彼が言うように、背景の色と画像に参加しても私の問題は解決されませんでした。その助けと私のコードの小さな変更で、私は問題を解決することができました。 – Mikel
また、このように両方の画像を使用して着色する短いトリックを使用することができます -
1.First clearpixel修正画像領域
body {
background:#000 url('images/checked.png');
}
<li style="background-color: #ffffff;"><a href="/<%=logo_marka_url%>"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></a></li>
他のサンプルボックスセンターイメージ画像と背景色2.スタイルセンターイメージエリアボックス 3.li背景またはdivカラースタイル
他の合理的なオプションがある場合、インラインCSSは適切ではありません。 – Smittles
MDN Web Docsに基づいて、複数の背景usi簡体字backgroundプロパティまたは個々のプロパティー（background-colorを除く）。
background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);
最初の項目（画像）パラメータ内の一番上に置かれます：あなたのケースでは、このようなlinear-gradientを使用してトリックを行うことができます。 2番目の項目（カラー背景）は、最初の項目の下に置かれます。他のプロパティを個別に設定することもできます。たとえば、イメージのサイズと位置を設定します。
background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;
この方法の利点は、たとえば、あなたが特定の不透明度で画像を重ね合わ青色を作りたい、簡単に他のケースのためにそれを実装することができます。
background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;
個々の特性パラメータがそれぞれ設定される。画像はカラーオーバーレイの下に置かれるため、プロパティパラメータもカラーオーバーレイパラメータの後に配置されます。
そして、あなたは、バックグラウンドで黒い影を生成したい場合は、以下の を使用することができます。
background:linear-gradient(rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
を第一の方法は、私のために動作しませんでした。第2の簡略法は完全に機能します。 –
もう1つは私のために働いた。 Steveに感謝します。 – starkeen
最初はまた私のために働かなかった。 2番目はやった。 – felwithe