Hintergrund Farbverlauf mit einfarbigen

Ich muss Folgendes tun: Die Oberseite des div ist ein Bild von einem Farbverlauf, dann in der Unterseite geht es als eine feste Farbe. Kann ich das mit einfachem CSS tun? Ich weiß, dass das Folgende ungültig ist.Hintergrund Farbverlauf mit einfarbigen

{background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px;

Hinweis: die erste 225px, die das Bild sollte füllt, werden, ohne die Hintergrundfarbe

Quelle

2013-07-29 marcias

Soweit ich weiß, Sie brauchen einen Gradienten für die feste Farbe zu verwenden, so dass Sie es richtig einstellen.

Die CSS wäre:

.imgbg { 
    width:255px; 
    height:355px; 
    background: url('http://blue2.hu/danone/nogravity/img/right_column_bg_top.png'), linear-gradient(90deg, #f7d8e8, #f7d8e8); 
    background-position: 0px 0px, 0px 112px; 
    background-repeat: no-repeat, no-repeat; 
    background-size: 255px 112px, 255px 233px; 
}

Hier ist your updated fiddle

Grund suport sollte für Browser unterstützt mehrere Hintergründe in Ordnung sein, wäre das einzige Problem mit IE sein < = 8. Gradient Hintergrund eine sein könnte Problem mit IE9, aber ich denke, dass es funktionieren sollte (ich kann IE9 nicht testen). Wenn es wirklich ein Problem wäre, siehe colozilla für eine Reparatur.

Quelle

2013-07-29 17:13:32 vals

Nun, das ist wirklich etwas, was ich suche, nur 2 Fragen übrig: Wie Crossbrowser ist das? Zweitens, wie ist das Arbeiten in einer dynamischen Höhe div? Ich frage das, weil Sie eine Hintergrundgröße-Eigenschaft verwendet haben. - Ich habe gerade dieses Eigentum entfernt, und es hat für mich gearbeitet. – marcias

Ich habe die Antwort bearbeitet, um Crossbrowser-Informationen einzubeziehen. Über die Bildgröße denke ich, dass die Angabe der Größe des Bildes kein Problem sein sollte, und so mit dem Farbverlauf, aber ich bin mir nicht wirklich sicher. – vals

ich folgendes tun würde:

#myDiv { background: #f7d8e8 url('/img/right_column_bg_top.png') repeat-x ; }

Dies wird nur Ihren Hintergrund setzen Bild auf der Oberseite des div; Der Rest davon wird die Farbe sein, die Sie für den gesamten Hintergrund des Divs ausgewählt haben.

Quelle

2013-07-29 12:52:34

Nun, haben Sie das versucht? Ich verwende Chrom, und es bringt die Farbe überall, sogar unter dem Bild, wo es transparent ist. – marcias

Vielleicht habe ich Ihre Frage nicht verstanden, aber was ist falsch daran, die Farbe unter das Bild zu stellen? Wenn es ein Farbverlauf zu einer Farbe ist, die mit dem Hintergrund identisch ist. Überprüfen Sie diese Seite, die ich vor einiger Zeit gemacht habe: [http://mychinesephrases.com] (http://mychinesephrases.com) wo ich den Gradienten auf das Körperobjekt setze. –

Überprüfen Sie dies, mit meinem Bild in Geige. Jetzt können Sie sehen, dass die rosa Farbe unter dem Bild ist .imgbg {width: 350px; Höhe: 300px; Hintergrund: # f7d8e8 url ('blue2.hu/danone/nogravity/img/right_column_bg_top.png') Was ich will ist, dass die rosa Farbe nur unter dem Ende des Bildes beginnen soll. – marcias

Überprüfen Sie diese Geige und sagen Sie mir, ob dies das ist, was Sie wollen.

FIDDLE

HTML

<div class="imgbg"></div>

CSS

.imgbg { 
    width:255px; 
    height:355px; 
    background:#f7d8e8 url('http://placehold.it/255x255') no-repeat; 
}

Quelle

2013-07-29 13:25:24 AnaMaria

Ich mache auch einen Link dafür: http://jsfiddle.net/YPcVB/1/ – marcias

Antwort

Verwandte Themen