it-swarm.com.de

CSS: Hintergrundbild auf Hintergrundfarbe

Ich habe ein Panel, das ich blau eingefärbt habe, wenn dieses Panel ausgewählt (angeklickt) wird. Außerdem füge ich diesem Fenster ein kleines Zeichen (.png-Bild) hinzu, das darauf hinweist, dass das ausgewählte Fenster bereits ausgewählt wurde.

Wenn der Benutzer z. B. 10 Felder sieht und 4 dieses kleine Zeichen haben, weiß er, dass er diese Felder bereits angeklickt hat. Das funktioniert soweit gut. Das Problem ist jetzt, dass ich das kleine Zeichen nicht anzeigen kann und das Panel gleichzeitig blau machen kann.

Ich habe das Panel mit dem css background: #6DB3F2; und dem Hintergrundbild mit background-image: url('images/checked.png') auf blau gesetzt. Es scheint jedoch, dass sich die Hintergrundfarbe über dem Bild befindet, sodass Sie das Zeichen nicht sehen können.

Kann man also z-indexes für die Hintergrundfarbe und das Hintergrundbild einstellen?

120
mkn

Sie müssen für jede den vollständigen Eigenschaftsnamen verwenden:

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

Oder Sie können die Abkürzung für den Hintergrund verwenden und alles in einer Zeile angeben:

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

Für mich hat diese Lösung nicht funktioniert:

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

Stattdessen funktionierte es andersherum:

<div class="block">
<span>
...
</span>
</div>

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

Und wenn Sie im Hintergrund einen schwarzen Schatten erzeugen möchten, können Sie .__ verwenden. folgende:

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

wirklich interessantes Problem, habe es noch nicht gesehen. Dieser Code funktioniert gut für mich. testete es in Chrome und IE9

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

Sie können auch einen kurzen Trick verwenden, um Bild und Farbe wie folgt zu verwenden: -

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

Basierend auf MDN Web Docs können Sie mit der background-Eigenschaft der Kurzschrift oder mit Ausnahme von background-color mehrere Eigenschaften festlegen. In Ihrem Fall können Sie mit linear-gradient einen Trick wie folgt ausführen:

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

Das erste Element (Bild) im Parameter wird oben angezeigt. Das zweite Element (farbiger Hintergrund) wird unter dem ersten platziert. Sie können auch andere Eigenschaften individuell festlegen. Zum Beispiel, um die Bildgröße und -position festzulegen.

background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;

Der Vorteil dieser Methode ist, dass Sie sie für andere Fälle problemlos implementieren können. Sie möchten beispielsweise, dass die blaue Farbe das Bild mit einer bestimmten Deckkraft überlagert.

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;

Einzelne Eigenschaftsparameter werden jeweils eingestellt. Da sich das Bild unter der Farbüberlagerung befindet, werden dessen Eigenschaftsparameter auch nach den Farbüberlagerungsparametern platziert. 

0
Luki B. Subekti

So stelle ich meine farbigen Schaltflächen mit einem Symbol im Hintergrund dar

Ich habe die Eigenschaft "Hintergrundfarbe" für die Farbe und die Eigenschaft "Hintergrund" für das Bild verwendet.

  <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