Gradient tła z jednolitym kolorem

Muszę wykonać następujące czynności: Górna część elementu div jest obrazem gradientu, a następnie na dole - jako jednolity kolor. Czy mogę to zrobić za pomocą prostych CSS? Wiem, że poniższe jest nieprawidłowe.Gradient tła z jednolitym kolorem

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

Uwaga: pierwsza 225px, która wypełnia obraz powinien być bez background-color

Źródło

2013-07-29 marcias

O ile mi wiadomo, trzeba użyć gradient na jednolity kolor, dzięki czemu można ustawić go poprawnie.

CSS byłoby:

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

Oto your updated fiddle

Podstawowe suport powinny być dobre dla przeglądarek obsługujących wielu środowisk, jedynym problemem będzie z IE < = 8. Gradient w tle może być problem z IE9, ale myślę, że to powinno działać (nie mogę przetestować IE9). Jeśli to byłby naprawdę problem, zobacz poprawkę pod numerem colozilla.

Źródło

2013-07-29 17:13:32 vals

Cóż, to jest naprawdę coś, czego szukam, pozostały tylko 2 pytania: jak to jest crossbrowser? Po drugie, jak to działa w dynamicznej wysokości div? Pytam o to, ponieważ użyłeś właściwości wielkości tła. - Właśnie usunąłem tę nieruchomość i zadziałało to dla mnie. – marcias

Edytowałem odpowiedź, aby uwzględnić informacje crossbrowser. O rozmiarze obrazu, myślę, że nie stwierdzenie rozmiaru obrazu nie powinno stanowić problemu, a więc z gradientem, ale nie jestem naprawdę pewien. – vals

chciałbym wykonać następujące czynności:

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

To wystarczy umieścić tło obraz na górze div; reszta, to kolor wybrany dla całego tła div.

Źródło

2013-07-29 12:52:34

No cóż, próbujesz tego? Używam chrome i umieszcza kolor wszędzie, nawet pod obrazem, gdzie jest przezroczysty. – marcias

Może nie zrozumiałem twojego pytania, ale co jest złego w umieszczaniu koloru pod obrazem? Jeśli jest to gradient do koloru identycznego z tłem. Zajrzyj na tę stronę, którą zrobiłem jakiś czas temu: [http://chichinskiphrases.com] (http://mychinesephrases.com) gdzie umieściłem gradient na obiekcie 'body'. –

Sprawdź to, z moim obrazem w skrzypcach. Teraz widać, że różowy kolor jest pod obrazem .imgbg {width: 350px; wysokość: 300 pikseli; background: # f7d8e8 url ('blue2.hu/danone/nogravity/img/right_column_bg_top.png') Chcę, aby różowy kolor zaczynał się dopiero pod końcem obrazu. – marcias

Sprawdź to skrzypce i powiedz mi, czy to jest to, czego chcesz.

FIDDLE

HTML

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

CSS

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

Źródło

2013-07-29 13:25:24 AnaMaria

Tworzę także link do niego: http://jsfiddle.net/YPcVB/1/ – marcias

Gradient tła z jednolitym kolorem

Odpowiedz

Powiązane problemy