Можно ли сделать полноэкранный эффект прозрачного градиента с помощью CSS?

Question

так что мне интересно, возможно ли это. У меня есть эта концепция, где у меня есть небольшая текстура, используемая в качестве фона. Это установлено, чтобы повторить и в x и в y.

В моем дизайне Photoshop я только что добавил теневой слой сверху, который становится прозрачным на 100% и до 40% прозрачным в сероватом цвете. Который вместе с фоновым изображением дает иллюзию тени. Теперь я попытался сохранить теневой слой в формате PNG, но, похоже, мне нужно сохранить его в формате PNG-24, что делает файл png ОГРОМНЫМ.

Итак, это вообще возможно? Я имею в виду, используя xml или xaml, это будет очень просто. Я бы просто вставил прямоугольник и добавил градиент с 0% вверху и 40% внизу, с черным цветом или что-то в этом роде. Дает мне хороший эффект затухания. Но это невозможно в HTML и CSS?

Answer 1

Немного сложно посоветовать без примера. Вы говорите в одном из комментариев: «Первоначально я хотел, чтобы тень немного изменялась к середине» - значит ли это, что у вас есть изображение шириной 1500 с лишним пикселей?

Обычно лучше повторять изображения везде, где это возможно, чтобы у вас могло быть одно изображение шириной 1 пиксель, повторяющееся полностью (это также лучше для действительно широких экранов), а затем отдельное изображение в другом «слое» с фоновое положение установлено на середину.

Если ваш градиент не выше 256px, вы также можете уменьшить количество цветов. Вы также можете попробовать PNGcrush , который является хорошим инструментом для уменьшения размера файлов PNG.

Answer 2

Обычно, если вы правильно понимаете ваше объяснение, вы можете применить ту же концепцию повторения тени, что и на обычном фоне.

Просто нарежьте тень на ширину 1px и полную высотусам градиент.Затем повторите png-изображение, указав каплю на оси X (css: background-repeat: repeat-x;)

Надеюсь, это поможет.Jasper

Answer 3

Я не уверен, правильно ли я понял, но на всякий случай я не знаю, слышали ли вы о мощном фильтре от Microsoft, который позволяет создавать красивые градиенты среди прочего.

Если вы вставите этот код в свой CSS, где вы хотите создать свой градиент, вы увидите результаты.

Фильтр: ProgID: DXImageTransform.Microsoft.Gradient (GradientType = 1, StartColorStr = '# 000000', EndColorStr = '# 0000FF')

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

Однако, как и в Microsoft, он работает только для IE: - (.

Надеюсь, это поможет.

Сезар.