CSS-градиент над несколькими элементами

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

После поиска, я нашел эту тему: Applying gradient over multiple views

Это именно моя проблема, хотя мне это нужно, как CSS/HTML код.

Чтобы визуализировать проблему, я сделал две картины:

Это базовая настройка. Два <div> s, нуждающиеся в градиентном фоне, находятся внутри более крупного элемента <div>.

Как вы можете видеть, градиент на втором изображении perfecly замирает от элемента А к элементу В. Этот эффект легко выполним в большинстве программ редактирования изображений, так что я мог бы просто использовать соответствующее изображение чтобы получить желаемый эффект.

Однако, поскольку изображения, вероятно, не лучший способ решить эту проблему, я надеюсь найти здесь ответ, как это сделать только с CSS. Раньше я использовал градиенты, но я еще не нашел решение этой проблемы самостоятельно.

Любая помощь приветствуется.

EDIT (06/01/15 13:30 GMT + 1): Элементы A и B должны иметь круглые углы. Первоначальный градиент должен был быть radial-gradient, но это не обязательно. Возможно, проблема действительно не разрешима.

источник

2015-01-06 curious

Как сложны ребенок формы вы рассматриваете? В приведенном выше примере вы, вероятно, могли бы подделать его, сделав оба дочерних фигуры одним и добавив средний бар. – xdhmoore

Еще одна идея: было бы немного странно, но вы могли бы рассчитать необходимые градиенты с помощью js и применить их вручную, основываясь на позиционировании каждого дочернего элемента. Особенно, если вы думаете о вертикальном или горизонтальном градиенте. – xdhmoore

Как насчет установки градиента в качестве фона и использования маски обрезания CSS для создания прямоугольников? – tsg

Демо:https://jsfiddle.net/andrewgu/gptbyejt/

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

Плюсы: Гибкие, совместимые

Против: Твердые цвета фона только

Method 1

Другой способ заключается в использовании нечто под названием CSS clipping. Вы можете сделать это, используя объявления CSS clip-path и -webkit-clip-path. Это в основном делает элемент прозрачным. Однако вам нужно заранее указать размер каждого элемента и немного настроить его, чтобы правильно отобразить элементы. Этот метод работает с не сплошным фоном. Вопреки распространенному мнению, CSS-обрезка довольно хороша с кросс-браузерной совместимостью.

Плюсы: узорчатые фоны, совместимые

Минусы: Задаваемые размеры ребенка элемент, настройки

Method 2

источник

2015-01-06 04:37:51 andrewgu

Хорошая идея! Будет ли объект клипа работать с элементами с радиусом границы? – curious

Я просто заметил, что пример клипа не работает в firefox. Неужели firefox просто не поддерживает это? – curious

По-видимому, [клип-путь] (http://caniuse.com/#feat=css-clip-path) работает только в Firefox 33+, и даже тогда только через параметр 'url', а не' polygon'. Это означает, что вам нужно загрузить файл SVG размера, чтобы определить область отсечения. Он остается полностью неподдерживаемым в Internet Explorer и Opera Mini. – andrewgu

Комбинация background-attachment: fixed и iframe может сделать этот трюк для вас.
Проверьте nexts.github.io/Multiple.js и обратить внимание на «Как это работает» раздел

источник

2016-04-10 08:06:06 Denis

(Даже если это qestion довольно очень старый ...)

Посмотрите на Multiple.js - который описывает, как применить градиент к нескольким элементам без js.

Цитируется демонстрационной страницы:

.selector { 
    background-image: linear-gradient(white, black); 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; /* <- here it is */ 
    width: 100px; 
    height: 100px; 
}

background-attachment: fixed расширяет фон по размеру и отображает окна просмотра в каждом элементе соответствующего фрагмента, именно то, что нужно!

Идея этого проста как умная и работает для большинства современных браузеров (IE8 тоже).

При нанесении его выглядит так:

источник

2016-07-26 06:33:30 Clijsters

CSS-градиент над несколькими элементами

ответ

Смежные вопросы