Используйте градиент css над фоном image

Я пытался использовать линейный градиент поверх моего фонового изображения, чтобы получить эффект затухания на дне моего фона от черного до прозрачного, но, похоже, не в состоянии чтобы показать это.Используйте градиент css над фоном image

Я читал другие случаи здесь и примеры, но ни один из них не работает для меня. Я могу видеть только градиент или изображение, но не оба. Вот link

Просто нажмите на первый логотип, игнорируя этот эффект, то, что я пытаюсь, находится в теле на всем сайте после этого.

Это мой CSS код:

body { 
 
    background: url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1))); 
 
}

источник

2013-05-16 Pam

Я действительно не получить то, что вы ищете – Christian

Этот градиент - это только Webkit - не будет работать на FF или IE. Кроме того, я не верю, что вы можете применить градиент BG * и * к фону. Вам нужно будет применить изображение к bg, а затем добавить еще один слой (например, div) с градиентом –

Возможный дубликат [Возможно ли комбинировать фоновое изображение и градиенты CSS3?] (Http: // stackoverflow .com/questions/2504071/is-it-possible-to-comb-a-background-image-and-css3-gradients) – Blazemonger

Хорошо, я решил ее путем добавления URL для фонового изображения в конце линии.

Вот мой рабочий код:

.css { 
 
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat; 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat; 
 
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat; 
 
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat; 
 
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat; 
 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat; 
 
    height: 200px; 
 

 
}

<div class="css"></div>

источник

2013-05-16 14:22:37 Pam

Ищет это весь день, и это единственное решение, которое, казалось, работало так, как мне было нужно. Спасибо за сообщение. – GenXisT

Bravo !!!! 2 часа!! и ты это решил! – Alejandro

По какой-то причине мне пришлось сначала поместить свое изображение, затем градиент. благодаря! –

body { 
    margin: 0; 
    padding: 0; 
    background: url('img/background.jpg') repeat; 
} 

body:before { 
    content: " "; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%); 
}

ОБРАТИТЕ ВНИМАНИЕ: Это только с помощью WebKit поэтому он будет работать только в WebKit браузерах.

попробовать:

-moz-linear-gradient = (Firefox) 
-ms-linear-gradient = (IE) 
-o-linear-gradient = (Opera) 
-webkit-linear-gradient = (Chrome & safari)

источник

2013-05-16 14:04:05 Ma9ic

Это работает на хроме, если я так выразился: 'background: -webkit-gradient (линейный, левый верхний, левый нижний, от (rgba (0, 0, 0, 0.1)), to (rgba (0, 0, 0, 1))), url ('/ img/fondo-home.jpg') no-repeat; ' – Pam

Его использование webkit, поэтому он будет работать только в браузерах webkit. попробовать: http://gradients.glrzad.com/, чтобы получить полный: -moz-линейного градиента = (Firefox) -ms-линейный градиент-= (IE) -о-линейно gradient = (Opera) – Ma9ic

да, это сделало трюк спасибо! – Pam

Принятый ответ работает хорошо. Просто для полноты (и так как мне нравится это затрудненное), я хотел бы поделиться, как к нему с компасом (SCSS/SASS):

body{ 
    $colorStart: rgba(0,0,0,0); 
    $colorEnd: rgba(0,0,0,0.8); 
    @include background-image(linear-gradient(to bottom, $colorStart, $colorEnd), url("bg.jpg")); 
}

источник

2015-02-20 19:59:54

#multiple-background{ 
 
\t box-sizing: border-box; 
 
\t width: 123px; 
 
\t height: 30px; 
 
\t font-size: 12pt; 
 
\t border-radius: 7px; \t \t 
 
\t background: url("https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png"), linear-gradient(to bottom, #4ac425, #4ac425); 
 
\t background-repeat: no-repeat, repeat; 
 
\t background-position: 5px center, 0px 0px; 
 
    background-size: 18px 18px, 100% 100%; 
 
\t color: white; \t 
 
\t border: 1px solid #e4f6df; 
 
\t box-shadow: .25px .25px .5px .5px black; 
 
\t padding: 3px 10px 0px 5px; 
 
\t text-align: right; 
 
\t }

<div id="multiple-background"> Completed </div>

источник

2015-06-03 17:59:01

Используйте градиент css над фоном image

ответ

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