Я пытаюсь создать класс для применения к элементам, которые будут давать им градиент с использованием CSS. Проблема в том, что я хочу, чтобы класс, содержащий NO COLOR-, только непрозрачность от 1,0 до 0. Таким образом, я могу "заложить" его поверх любого элемента с любым цветом, и он даст ему градиент, в основном начиная с первоначальный цвет и затухание до белого.
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e9e9e9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e9e9e9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e9e9e9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e9e9e9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e9e9e9 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e9e9e9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9e9',GradientType=0 ); /* IE6-9 */
Как мне это сделать без указания цвета?
Это невозможно без указания цвета для перехода. Вы можете использовать rgba()
чтобы определить цвет, а затем и его непрозрачность, но влиять только на непрозрачность не представляется возможным. Примером градиента, который вы получите при использовании rgba()
, будет:
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(233, 233, 233, 0) 100%); /* W3C */
что переход между двумя указанными цветами, идущий от полностью прозрачного на #e9e9e9
(который является таким же, как rgba(233, 233, 233, 1)
), полностью непрозрачен на белом. Опять же, это альтернатива тому, что вы на самом деле хотите, но переходная непрозрачность невозможна.
PS: вы также можете #AARRGGBB
полупрозрачные цвета в более старые версии IE с использованием формата #AARRGGBB
.
0%
если выбранный цветtransparent
?