web-dev-qa-db-ja.com

CSS：背景色の背景イメージ

このパネルが選択されている（クリックされている）場合、私は私が青に着色したパネルを持っています。さらに、そのパネルに小さな記号（.png image）を追加しました。これは、選択されたパネルが既に選択されていることを示しています。

したがって、たとえば10個のパネルがあり、そのうち4個のパネルにこの小さな記号が表示されている場合、そのパネルをクリックしたことがあることがわかります。これまでのところうまくいきます。問題は、小さいサインを表示することとパネルを同時に青にすることができないことです。

私はパネルをcss background: #6DB3F2;で背景画像をbackground-image: url('images/checked.png')で青に設定しました。しかし、背景色は画像の上にあるため、看板は見えません。

したがって、背景色と背景画像にz-indexesを設定することは可能ですか？

cssbackgroundbackground-imagebackground-color
128
mkn

それぞれに完全なプロパティ名を使用する必要があります。

background-color: #6DB3F2;
background-image: url('images/checked.png');

あるいは、背景の短縮形を使用して、すべて1行で指定することもできます。

background: #6DB3F2 url('images/checked.png');
241
dodger

私にとっては、この解決策はうまくいきませんでした。

background-color: #6DB3F2;
background-image: url('images/checked.png');

しかし、代わりにそれは他の方法で働いた：

<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%;
}
29
Francisc Aknai

そして、もしあなたが背景に黒い影を生成したいのなら、あなたは以下を使うことができます：

background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
9
Risa__B

本当に面白い問題、まだそれを見ていません。このコードは私にはうまく働きます。クロムとIE9でそれをテストしました

<html>
<head>
<style>
body{
    background-image: url('img.jpg');
    background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
2
Ramzi Khahil

あなたはまたこのように画像と色の両方を使うために短いトリックを使うことができます： - 

body {
     background:#000 url('images/checked.png');
 }
1
Kesar Sisodiya

MDN Webドキュメント に基づいて、短縮形のbackgroundプロパティまたはbackground-color以外の個々のプロパティを使用して複数の背景を設定できます。あなたのケースでは、あなたはこのようにlinear-gradientを使ってトリックをすることができます：

background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);

パラメータの最初の項目（画像）が一番上に配置されます。 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;

個々のプロパティパラメータはそれぞれ設定されます。画像はカラーオーバーレイの下に配置されるため、そのプロパティパラメータもカラーオーバーレイパラメータの後に配置されます。

0
Luki B. Subekti

これは、背景にアイコンがある色付きボタンのスタイルです。

色には「background-color」プロパティを、画像には「background」プロパティを使用しました。

  <style>
    .btn {
      display: inline-block;
      line-height: 1em;
      padding: .1em .3em .15em 2em
      border-radius: .2em;
      border: 1px solid #d8d8d8;

      background-color: #cccccc;
    }

    .thumb-up {
      background: url('/icons/thumb-up.png') no-repeat 3px center;
    }

    .thumb-down {
      background: url('/icons/thumb-down.png') no-repeat 3px center;
    }
  </style>

  <span class="btn thumb-up">Thumb up</span>
  <span class="btn thumb-down">Thumb down</span>
0
Da Beginer