CSS: Hintergrundbild auf Hintergrundfarbe

168

Ich habe ein Feld, das ich blau gefärbt habe, wenn dieses Feld ausgewählt ist (darauf geklickt). Zusätzlich füge ich .pngdiesem Feld ein kleines Zeichen ( Bild) hinzu, das anzeigt, dass das ausgewählte Feld bereits zuvor ausgewählt wurde.

Wenn der Benutzer beispielsweise 10 Panels sieht und 4 davon dieses kleine Zeichen haben, weiß er, dass er bereits zuvor auf diese Panels geklickt hat. Das funktioniert soweit gut. Das Problem ist jetzt, dass ich das kleine Schild nicht anzeigen und gleichzeitig das Panel blau machen kann.

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

Ist es daher möglich, z-indexes für die Hintergrundfarbe und das Hintergrundbild einzustellen ?

— mkn
quelle

288

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

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

Sie können auch die Hintergrundkürzel verwenden und alles in einer Zeile angeben:

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

— Dodger
quelle

7

Die 1. Methode hat bei mir nicht funktioniert. Die 2. Kurzmethode funktioniert einwandfrei.

— Steve Breese

1

Unsicherer

— Stilwert

@Nexeuz Warum betrachten Sie diese Stilsyntax als unsicheres Nexeuz?

— Webwoman

31

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

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

Aber stattdessen funktionierte es andersherum:

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

das 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 Aknai
quelle

2

Danke für den Code Francisc !! Wie er sagt, hat das Zusammenfügen von Hintergrundfarbe und Bild das Problem auch für mich nicht gelöst. Mit dieser Hilfe und kleinen Änderungen an meinem Code konnte ich das Problem lösen.

— Mikel

17

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

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

— Risa__B
quelle

5

Basierend auf MDN-Webdokumenten können Sie mehrere Hintergründe mithilfe von Kurzschrift- backgroundEigenschaften oder einzelnen Eigenschaften festlegen, mit Ausnahme von background-color. In Ihrem Fall können Sie einen Trick folgendermaßen ausführen linear-gradient:

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

Das erste Element (Bild) im Parameter wird oben platziert. Das zweite Element (farbiger Hintergrund) wird unter das erste eingefügt. Sie können auch andere Eigenschaften einzeln festlegen. Zum Beispiel, um die Bildgröße und Position einzustellen.

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

Der Vorteil dieser Methode besteht darin, dass Sie sie problemlos für andere Fälle 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 das Bild unter der Farbüberlagerung platziert wird, werden seine Eigenschaftsparameter auch nach den Farbüberlagerungsparametern platziert.

— Luki B. Subekti
quelle

2

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

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

— Ramzi Khahil
quelle

2

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

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

— Kesar Sisodiya
quelle

1

Das funktioniert eigentlich bei mir:

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

Sie können auch einen festen Schatten fallen lassen und das Hintergrundbild festlegen:

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

Wenn die erste Option aus irgendeinem Grund nicht funktioniert und Sie den Boxschatten nicht verwenden möchten, können Sie immer ein Pseudoelement für das Bild ohne zusätzlichen HTML-Code verwenden:

.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');
}

— Fernán García de Zúñiga
quelle

0

So habe ich meine farbigen Schaltflächen mit einem Symbol im Hintergrund gestaltet

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>

— Da Anfänger
quelle

-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>

Andere Sample Box Center Bild und Hintergrundfarbe

1.First Clearpixel Fix Image Area 2.Style Center Image Area Box 3.li Hintergrund oder Div Color Style

— alpc
quelle

2

Inline-CSS ist nicht geeignet, wenn es eine andere sinnvolle Option gibt.

— Jon Mitten

-10

body 
{
background-image:url('image/img2.jpg');
margin: 0px;
 padding: 0px;
}

— Vikash Pathak
quelle