Создание CSS3 источника света на фоне

Question

Есть ли способ взять DIV с фоновым изображением, а затем применить градиент CSS3 для имитации источника света?

Причина, по которой я спрашиваю, заключалась в том, что я думал о создании телаДля тега на странице используйте повторяющийся фоновый узор, примените к нему источник градиентного света CSS3, а затем прикрепите белый DIV поверх того, куда будет помещаться весь контент страницы.

Для тех, у кого нет CSS3, это ухудшитсякрасиво в белый DIV на фоне повторяющегося фона.

Answer 1

Чтобы сделать это только на элементе тела, вам нужно объединить несколько фонов , RGBA и радиальные градиенты . Вам понадобится свойство по умолчанию с одним повторяющимся фоном для тех браузеров, которые не поддерживают градиенты, тогда Gecko и Chrome / Safari имеют разный синтаксис для градиентов , поэтому вам потребуется свойство для каждого из них , Должно получиться что-то вроде (не проверено):

body {
    background: url(repeat.jpg);
    background: -moz-radial-gradient(100px 100px, ellipse farthest-corner,   white 0%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0.5) 25%) no-repeat, url(repeat.jpg);
    background: -webkit-gradient(radial, 100 100, 200, from(#fffff), to(rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.5)) no-repeat, url(repeat.jpg);
}

Вы можете обнаружить, что добавление элемента-оболочки для вашего источника света в долгосрочной перспективе требует меньше усилий.

Answer 2

Я не думаю, что есть какой-то способ сделать это, но вы можете добавить div сразу после вашего тега, который равен 100% на 100% с низким z-индексом, и применить к нему CSS3.

Надеюсь, это то, о чем вы говорите.