CSS:背景色の背景画像


169

このパネルが選択されている(クリックされている)場合、青色に着色したパネルがあります。さらに、.pngそのパネルに小さな記号(画像)を追加します。これは、選択したパネルが以前にすでに選択されていることを示しています。

したがって、たとえば10個のパネルが表示され、そのうちの4個がこの小さな兆候を持っている場合、ユーザーは以前にそれらのパネルをクリックしたことがあることがわかります。これはこれまでのところうまくいきます。問題は、小さな看板を表示すると同時にパネルを青色にすることができないことです。

CSSでパネルを青にbackground: #6DB3F2;、背景画像をに設定しましたbackground-image: url('images/checked.png')。ただし、背景色が画像の上にあるため、標識が見えないようです。

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

回答:


289

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

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

または、背景の省略形を使用して、すべてを1行で指定することもできます。

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

7
最初の方法ではうまくいきませんでした。2番目の速記法は完全に機能します。
Steve Breese

1
安全でないスタイルの値
Nexeuz

@Nexeuzなぜこのスタイルの構文を安全でないNexeuzと見なすのですか?
Webwoman

31

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

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

2
コードFranciscをありがとう!! 彼が言うように、背景色と画像を結合しても問題は解決しませんでした。その助けと私のコードの小さな変更により、問題を解決することができました。
ミケル2017

17

また、バックグラウンドでブラックシャドウを生成する場合は、以下を使用できます。

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

5

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;

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


2

本当に興味深い問題で、まだ見ていません。このコードは私には問題なく動作します。クロムとIE9でそれをテストしました

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

2

短いトリックを使用して、次のように画像と色の両方を使用することもできます。

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

1

これは実際に私のために働きます:

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

また、無地の影を落として背景画像を設定することもできます。

background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;

最初のオプションが何らかの理由で機能せず、ボックスシャドウを使用したくない場合は、追加のHTMLを使用せずに、常に画像の疑似要素を使用できます。

.btn{
    position: relative;
    background-color: #6DB3F2;
}
.btn:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    background-image: url('images/checked.png');
}

0

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

色には「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>

-2

<li style="background-color: #ffffff;"><a href="https://stackoverflow.com/<%=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>

他のサンプルボックスセンター画像と背景色

1.最初のclearpixel修正画像領域2.style中央画像領域ボックス3.li背景またはdiv色スタイル


2
他の合理的なオプションがある場合、インラインCSSは適切ではありません。
Jon Mitten、2015年

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.