Как наложить свечение поверх фона body?

Question

[Павел]

Есть задача, фон залить цветом, поверх полупрозрачная картинка.
нужно добавить "подсветку" центра.

В данный момент код выглядит так:

body {
background: #500c12;
background-image: url(/images/tilesw200.png);
}

нужно поверх этого фона добавить свечение цветом.
Как?

Answer 1

[Александр Петров]

добавьте еще один div внутри блока
div{
width:100%;
height:100%;
position:fixed;
z-index:0;
left:0px;
top:0px;
opacity:0.5;
}

И дайте ему радиальный градиент: www.colorzilla.com/gradient-editor
С помощью opacity регулируйте интенсивность градиента.

Comments

[trushka]

можно прямо в body

body {
  background: radial-gradient(...), #500c12 url(/images/tilesw200.png);
}

[Павел]

Александр Петров, trushka: Как комментарий отметить решением? Возможно тут два ответа решением отметить?
Получилось ваш пример + генератор из сообщения выше.

[Александр Петров]

Тогда, если я правильно предполагаю, картинка будет сверху градиента, а нам необходимо наоборот.

[Павел]

Александр Петров:

Вот так - то что нужно...
/* Permalink - use to edit and share this gradient: colorzilla.com/gradient-editor/#f1da36+16,fefcea+81&0.5+14,0.01+55 */
background: -moz-radial-gradient(center, ellipse cover, rgba(241,218,54,0.5) 14%, rgba(241,218,54,0.48) 16%, rgba(249,238,162,0.01) 55%, rgba(254,252,234,0.01) 81%), #500c12 url(/images/tilesw200.png); /* FF3.6-15 */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(14%,rgba(241,218,54,0.5)), color-stop(16%,rgba(241,218,54,0.48)), color-stop(55%,rgba(249,238,162,0.01)), color-stop(81%,rgba(254,252,234,0.01))); /* Chrome4-9,Safari4-5 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(241,218,54,0.5) 14%,rgba(241,218,54,0.48) 16%,rgba(249,238,162,0.01) 55%,rgba(254,252,234,0.01) 81%), #500c12 url(/images/tilesw200.png); /* Chrome10-25,Safari5.1-6 */
background: -o-radial-gradient(center, ellipse cover, rgba(241,218,54,0.5) 14%,rgba(241,218,54,0.48) 16%,rgba(249,238,162,0.01) 55%,rgba(254,252,234,0.01) 81%), #500c12 url(/images/tilesw200.png); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(241,218,54,0.5) 14%,rgba(241,218,54,0.48) 16%,rgba(249,238,162,0.01) 55%,rgba(254,252,234,0.01) 81%), #500c12 url(/images/tilesw200.png); /* IE10 preview */
background: radial-gradient(ellipse at center, rgba(241,218,54,0.5) 14%,rgba(241,218,54,0.48) 16%,rgba(249,238,162,0.01) 55%,rgba(254,252,234,0.01) 81%), #500c12 url(/images/tilesw200.png); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80f1da36', endColorstr='#03fefcea',GradientType=1 ), #500c12 url(/images/tilesw200.png); /* IE6-9 fallback on horizontal gradient */

clip2net.com/s/3Bja4lG

[Павел]

и еще вопрос, а масштабировать tilesw200.png возможно?

[trushka]

Павел: Можно масштабировать, htmlbook.ru/css/background-size
Александр Петров: составные свойства разбираются "с конца", то есть сначала будет картинка, а потом градиент

Answer 2

[Алексей]

Если наложение картинки рассматривается как вариант. Можно просто применить для body множественные фона. Хотя там можно и градиент css забацать
https://m.habrahabr.ru/company/microsoft/blog/137705/ описание на хабре.