Фоновый градиент с сплошным цветом

Я должен сделать следующее: Верхняя часть div - это изображение градиента, а затем в нижней части оно продолжается как сплошной цвет. Могу ли я сделать это с помощью простого CSS? Я знаю, что следующее неверно.Фоновый градиент с сплошным цветом

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

Примечание: первая 225px, которая заполняет изображение, должно быть без фона цвета

источник

2013-07-29 marcias

Насколько я знаю, вы должны использовать градиент для сплошного цвета, так что вы можете установить его правильно.

CSS-бы:

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

Здесь your updated fiddle

Basic зоныСкидки должно быть хорошо для браузеров, поддерживающих несколько фонов, единственная проблема будет с IE < = 8. Градиент фон может быть проблема с IE9, но я думаю, что он должен работать (я не могу проверить IE9). Если это будет действительно проблема, см. colozilla для исправления.

источник

2013-07-29 17:13:32 vals

Ну, это действительно то, что я ищу, осталось только 2 вопроса: как это кроссбраузер? Во-вторых, как это работает в динамической высоте div? Я спрашиваю об этом, потому что вы использовали свойство размера фона. - Я просто удалил это имущество, и это сработало для меня. – marcias

Я отредактировал ответ, чтобы включить информацию о кроссбраузерах. Что касается размера изображения, я думаю, что не указывать размер изображения не должно быть проблемой, и поэтому с градиентом, но я не совсем уверен. – vals

Я хотел бы сделать следующее:

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

Это просто поставить свой фон изображение в верхней части div; остальная часть будет цветом, который вы выбрали для всего фона div.

источник

2013-07-29 12:52:34

Ну, вздумайте, вы это пробовали? Я использую хром, и он помещает цвет везде, даже под изображение, где он прозрачен. – marcias

Возможно, я не понял ваш вопрос, но что случилось, если вы поместили цвет под изображение? Если это градиент цвета, идентичного фону. Проверьте этот сайт, который я сделал некоторое время назад: [http://mychinesephrases.com] (http://mychinesephrases.com), где я помещал градиент в объект body. –

Проверьте это, с моим изображением в скрипке. Теперь вы можете видеть, что розовый цвет находится под изображением .imgbg {width: 350px; высота: 300px; background: # f7d8e8 url ('blue2.hu/danone/nogravity/img/right_column_bg_top.png') Я хочу, чтобы розовый цвет начинался только под окончанием изображения. – marcias

Посмотрите эту скрипку и скажите, если это то, что вы хотите.

FIDDLE

HTML

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

CSS

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

источник

2013-07-29 13:25:24 AnaMaria

Я также делаю для этого ссылку: http://jsfiddle.net/YPcVB/1/ – marcias

Фоновый градиент с сплошным цветом

ответ

Смежные вопросы