Цвет градиента CSS останавливается от конца в пикселях

Я работаю над проектом HTML/CSS/JS, где приложение является фиксированным размером, и элементы должны быть расположены точно на основе проектов. Поскольку размер окна исправлен, я могу легко работать с размерами пикселей в CSS и не беспокоиться об изменении размера браузера. У меня также есть роскошь не беспокоиться об IE или Opera: приложение должно работать только в webkit и firefox.

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

background-image: linear-gradient(to top, #666666, #000000 60px);

(и его сопоставления -webkit- и -moz-). Это делает трюк для большинства элементов. Однако есть пара, где мне нужно иметь верхние и нижние позиции пикселей для прекращения цвета. Если бы это были процентные пункты, то это можно было бы сделать с чем-то вроде:

background-image: linear-gradient(to top, #666666, black 60px, transparent 60px, transparent 90%, black 90%, #666666);

(от серого до черного более 60 пикселей, затем прозрачный, а затем от черного до серого в течение последних 10%). Однако мне нужно сделать то же самое с пикселями, так как этот элемент в разное время имеет разные размеры. Я бы хотел избежать использования JS для повторного применения градиента в разных динамически рассчитанных процентных пунктах, если это необходимо.

Итак, мой вопрос: существует ли способ указать прекращение цвета x пикселей (не процент) от конца?

Ответ 1

Я только что перешел через поисковую систему, я думаю, что лучшее решение уже было дано vals с использованием нескольких фоновых изображений, но вместо использования background-size и background-position я думаю, что это более гибкой и стабильной для использования альфа-цветов здесь (с rgba()), как в примере ниже:

background-image:
    /* top gradient - pixels fixed */
    linear-gradient(to bottom, rgb(128,128,128) 0px,rgba(128,128,128,0) 16px), 
    /* bottom gradient - pixels fixed */
    linear-gradient(to top, rgb(128,128,128) 0px, rgba(128,128,128,0) 16px),  
    /* background gradient - relative */
    linear-gradient(to bottom, #eee 0%, #ccc 100%) ;

Это дает мне именно то поведение, которое я изначально искал.:)

Демо: http://codepen.io/Grilly86/pen/LVBxgQ

Ответ 2

Я не думаю, что это возможно, но наложение двух объектов, одно с непрозрачными пикселями снизу, а другое с пикселями сверху, все равно позволит избежать использования JS

.background {
    position: absolute;
    background-image: linear-gradient(to top, #666666, black 60px, transparent 60px);
}
.overlay {
    position: relative;
    background-image: linear-gradient(to bottom, #666666, black 60px, transparent 60px);
}

Ответ 3

В строке предыдущего ответа от po228, но в том же фон элемента.

Установите 2 разных градиента, один из которых начинается сверху, а другой снизу

.test {
  background: linear-gradient(to top, red 10px, white 10px),
      linear-gradient(to bottom, blue 10px, white 10px);
  background-size: 100% 50%;
  background-repeat: no-repeat;
  background-position: bottom center, top center;
  height: 150px;
  width: 300px;
}

<div class="test"></div>