Почему не работает градиент?
Здравствуйте. В блоке есть фоновая картинка. На случай если картинка не загрузилась под ней должен быть градиент. Но не работает.
background-repeat: no-repeat; background-position: center top; -webkit-background-size: cover; background-size: cover; background: #ad633c url(../img/bg-models.jpg);background-image: url(../im1g/bg-models.jpg);//путь к картинке неверный чтобы отобразился фон background-repeat: no-repeat; background-position: center top; -webkit-background-size: cover; background-size: cover; background-color: #ad633c; background-color: -moz-linear-gradient(top, #ad633c 0%, #1e110a 100%); background-color: -webkit-linear-gradient(top, #ad633c 0%,#1e110a 100%); background-color: linear-gradient(to bottom, #ad633c 0%,#1e110a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad633c', endColorstr='#1e110a',GradientType=0 );- Вопрос задан более трёх лет назад
- 4601 просмотр
Комментировать
Решения вопроса 1
Сергей delphinpro @delphinpro Куратор тега CSS
frontend developer
Градиент — это картинка. Задается свойством background-image;
Если вы задаете несколько background-image — будет использовано последнее объявление (понимаемое браузером), и не важно, что картинка не загрузилась.
Для решения вашей задачи можно использовать множественные фоны
background-image: url('. '), linear-gradient(. );Но в этом случае нужно иметь ввиду, что IE8 ничего не знает про множественные фоны.
Если нужна поддержка и IE8, то у вас единственный выход — добавить внешнюю обертку и задавать градиент ей.
Функция linear-gradient
Функция linear-gradient задает линейный градиент. Применяется к свойствам, которые задают картинку фона: background , background-image или картинку границы: border-image , background-image-source .
Синтаксис
Значения
| Значение | Описание |
|---|---|
| направление | Задает определенное направление градиента в любых единицах для углов либо ключевыми словами top , left , right , bottom или их комбинацией: top left , top right и так далее. Порядок слов не важен: можно писать top left и left top , разницы нет. Параметр необязательный: если его не написать, градиент будет идти сверху вниз (как при to top ). Перед направлением ставится слово to . |
| угол | Угол в любых единицах для углов. Может быть положительным или отрицательным. Параметр необязательный. Одновременно может быть задан или угол, или направление (или вообще ничего). |
| цвет1 | Начальный цвет градиента в любых единицах для цвета. |
| цвет2 | Конечный цвет градиента в любых единицах для цвета. |
| размер | Задает протяженность определенного цвета градиента в любых единицах для размера. |
Пример . Самый простой вариант
Посмотрим на примере:
Пример . Добавляем угол
Посмотрим на примере:
Пример . Добавляем направление
Вместо угла можно добавить направление top , left , right , bottom или их комбинацию: top left , top right Перед направлением ставится слово to .
Посмотрим на примере:
Пример . Добавляем направление
Укажем другое направление:
Пример . Добавляем размер
В следующем примере поведение будет следующее: чистый красный цвет будет от 0px до 30px , от 30px до 50px будет градиент от красного до голубого, а от 50px и до конца — чистый голубой:
Пример . Добавляем более чем 2 цвета
В следующем примере поведение будет следующее: чистый красный цвет будет от 0px до 30px , от 30px до 50px будет градиент от красного до голубого, а от 50px и до 70px — градиент от голубого до зеленого, а после 70px — чистый зеленый:
Пример . Резкие переходы
В следующем примере поведение будет следующее: чистый красный цвет будет от 0px до 30px , чистый голубой — от 30px до 60px , чистый зеленый — после 60px ( red 0px можно и не писать):
Пример . Размеры можно задавать и в процентах
В следующем примере поведение будет следующее: чистый красный цвет будет от 0% до 30% , чистый голубой — от 30% до 60% , чистый зеленый — после 60% ( red 0% можно и не писать):
Пример . Сочетание с background-size
В следующем примере поведение будет следующее: чистый красный цвет будет от 0px до 30px , чистый голубой — от 30px до 60px , при этом все это будет повторяться кусочками по 60px (из-за background-size: 60px; ):
Смотрите также
- функцию linear-gradient ,
которая создает линейный градиент - функцию radial-gradient ,
которая создает радиальный градиент - функцию repeating-linear-gradient ,
которая создает повторяющийся линейный градиент - функцию repeating-radial-gradient ,
которая создает повторяющийся радиальный градиент
Не работает linear-gradient
По идее, стиль должен работать, но почему то в браузере ошибка. Подскажите как поправить. UPD. Проверял и в опере и в хроме (последние версии) UPD. Всё решилось само собой после перезагрузки!
Отслеживать
67.9k 216 216 золотых знаков 77 77 серебряных знаков 219 219 бронзовых знаков
задан 6 июл 2012 в 16:30
886 14 14 серебряных знаков 35 35 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Вероятно, Ваш браузер не поддерживает данное свойство.
Многие браузеры не поддерживают функцию linear-gradient , но в то же время поддерживают такие же функции, только под другим названием, например Firefox3.6+ поддерживает -moz-linear-gradient , Chrome и Safari4+ поддерживают -webkit-gradient , Opera11.10+ поддерживает -o-linear-gradient и т.д.
Вместо того, что-бы прописывать всё это вручную, советую пользоватся градиент-генераторами, такими, как этот.
Отслеживать
ответ дан 6 июл 2012 в 16:47
2,660 2 2 золотых знака 20 20 серебряных знаков 32 32 бронзовых знака
Пользуюсь генератором и хаками тоже, не помогает!
6 июл 2012 в 16:56
Вот так код градиента точно срабатывает.
background-image: linear-gradient( to bottom, rgba($black, .8) 0%, rgba($black, 0) 50%, rgba($black, .8) 100%); Linear-gradient(): линейный градиент в фоне
Цветовой градиент — это плавный переход от одного заданного цвета к другому через промежуточные цвета. В линейном градиенте переход происходит по прямой, от точки A к точке B. Градиент может иметь и более двух опорных точек — тогда переход совершается от точки A к точке B, затем от точки B к точке C и так далее.
Как сделать фоновый линейный градиент в CSS
В CSS3 вы можете добавлять градиентный фон к элементам через уже известное свойство background-image . В качестве значения используется ключевое слово linear-gradient() , где в скобках необходимо указать стартовую точку градиента, начальный цвет и конечный цвет.
Например, давайте сделаем фоновый линейный градиент с переходом от фиолетового цвета к красному. При этом мы хотим, чтобы начальная точка с фиолетовым цветом была с правой стороны, а вектор градиента направлялся влево. Запишем код:
background-image: linear-gradient(to left, violet, red);
Цвета точек градиента можно записывать в любом формате, доступном в CSS, будь-то шестнадцатеричный код, формат RGB или другой. Направление градиента задается с помощью приставки to и затем ключевых слов left , right , top и bottom , которые можно комбинировать для изменения наклона. Например:
background-image: linear-gradient(to bottom right, #ee82ee, #ff0000);
Кроме этого, можно прямо указать угол наклона, использовав положительное либо отрицательное число с приставкой deg (без пробела). При заданном угле 0º либо 360º градиентная линия будет идти снизу вверх. При увеличении угла наклона движение вектора происходит по часовой стрелке (при использовании отрицательного значения движение меняется на противоположное). Пример записи кода:
background-image: linear-gradient(-110deg, #ee82ee, #ff0000);
Чтобы лучше понять поведение линейных градиентов, необходимо видеть их. Поэтому рекомендуем вам самостоятельно попрактиковаться после прочтения данного урока.
Несколько опорных точек
Как мы уже сказали, у градиента может быть более двух опорных точек. При этом фон будет плавно переходить от первого цвета ко второму, от второго к третьему, от третьего к четвертому и так далее, пока не достигнет финальной опорной точки. Если вы хотите увеличить количество данных точек в градиенте, просто допишите их через запятую. Например:
background-image: linear-gradient(145deg, #ee82ee, slateblue, #ffd86a, purple);
В нашем примере указаны четыре опорных цветовых точки, но их можно добавлять сколько угодно и в каких угодно доступных цветовых форматах.
Длина переходов
По умолчанию браузер размещает точки на равном расстоянии, поэтому и градация получается равномерной. Но этим расстоянием можно управлять, используя единицы измерения CSS. Давайте разберем следующий пример:
background-image: linear-gradient(#92009b 20%, #f5e944 90%, #00ffa2);
В нашем коде после цвета #92009b указано значение 20% . Поскольку оно стоит возле первой опорной точки, это означает, что указанным цветом будет закрашено 20% длины элемента. После чего уже начинается градиент: значение 90% говорит браузеру, что нужно достичь цвета #f5e944 к 90% длины элемента (начав на уровне 20%). После чего в оставшемся пространстве начинается переход к третьему цвету — #00ffa2 .
Эта тема также требует практики. Попробуйте создать градиентный фон с несколькими опорными точками (более двух), поиграться со значениями расстояний и понаблюдать за изменениями градиента в браузере.
Вендорные префиксы
Для обеспечения кроссбраузерности к некоторым поздним CSS-свойствам нужно дописывать вендорные префиксы — специальные приставки, которые добавляют разработчики браузеров:
- -webkit- — префикс для Chrome, Safari, Android;
- -moz- — префикс для Firefox;
- -o- — префикс для Opera.
Градиентный фон тоже требует использования данных префиксов, если есть необходимость в поддержке максимального количества браузеров. Для этого адаптируйте код следующим образом:
background-image: -webkit-linear-gradient(left, violet, red); background-image: -moz-linear-gradient(left, violet, red); background-image: -o-linear-gradient(left, violet, red); background-image: linear-gradient(to left, violet, red);
Для добавления префикса требуется создавать отдельное объявление. Кроме того, как вы могли заметить, свойства с вендорными префиксами не требуют использования приставки to при указании направления градиента.
Поддержка Internet Explorer
К сожалению, градиентный фон работает только в IE10+. Предыдущие версии не понимают его и будут игнорировать. Чтобы обеспечить хотя бы обычный фон в старых браузерах, можно создать т. н. «заглушку»: выберите подходящий оттенок и запишите свойство background-color над свойством с градиентом. Таким образом, старый браузер применит «резервный» фоновый цвет, а неизвестные ему свойства пропустит, тогда как в более современном браузере градиентный фон наложится на сплошной фон и перекроет его.
Если же у вас установлен полупрозрачный градиент (например, с использованием цветового формата RGBA) и вы не хотите, чтобы сквозь него просвечивался резервный фон-заглушка, задавайте градиент через сокращенное свойство background вместо background-image . Тогда значение background-color будет перезаписано на transparent .
Далее в учебнике: repeating-linear-gradient() — повторяющийся линейный градиент.