CSS градиент: определить ширину в пикселях

Пожалуйста, обратите внимание на эту скрипку: http://jsfiddle.net/jpftqc26/CSS градиент: определить ширину в пикселях

градиент CSS, начинается черный слева, превращается в красный, а затем обратно в черный снова. На самом деле просто.

Есть ли способ сделать красную часть шириной 500 пикселей, а черные части заполняют экран, независимо от разрешения? С красным посередине, как в скрипке.

Есть ли способ определить ширину в пикселях, между остановками цвета, в градиенте CSS?

Код:

.test_gradient { 
background: 
linear-gradient(
     to right, 
     #000000, 
     #000000 20%, 
     #ff0000 20%, 
     #ff0000 80%, 
     #000000 80% 
    );

источник

2014-10-06 Malasorte

Есть ли причина для его градиента? – Jung3o

функция 'calc'. Вы делаете '... # ff0000 calc (20% + 10px), ...' – Gqqnbig

Если вы хотите, чтобы черная часть была гибкой и красная часть была установлена, вы можете использовать что-то вроде этого:

html{height:100%;} 
.test_gradient { 
    background: #000000; 
    position:relative; 
    margin:0; 
    height:100%; 
} 
.test_gradient:after{ 
    content:''; 
    position:absolute; 
    top:0; 
    height:100%; 
    width:500px; 
    left:50%; 
    margin-left:-250px; 
    background:#f00; 
}

DEMO

источник

2014-10-06 19:02:21 Anon

Я думаю, что * must * это неправильное слово здесь. Очевидно, что * мог бы быть лучшим выбором, так как существует определенно более одного решения. – Phlume

спасибо !! Проделайте некоторые тесты! – Malasorte

@Phlume, sry, мой английский плохой – Anon

На данный момент я не могу думать о том, как это сделать только с CSS градиенты и одного элемента.

Учитывая ваш пример, и предполагая дополнительный DIV в порядке, то вот альтернативный подход без градиентов (http://jsfiddle.net/jpftqc26/2/):

HTML

<body class="background"> 
    <div class="foreground"/> 
</body>

CSS

html, body { 
    width: 100%; 
    height: 100%; 
} 

.background { 
    background-color: #000000; 
} 
.foreground { 
    background-color: #ff0000; 
    width: 100%; 
    max-width: 500px; 
    height: 100%; 
    margin-left: auto; 
    margin-right: auto; 
}

Это производит тот же эффект, использует один дополнительный элемент и обеспечивает красный передний план, который вырастет до максимальной ширины 500 пикселей - кроме того, что с обеих сторон все черные. Если вы хотите, чтобы красный до всегда был шириной 500 пикселей, тогда просто удалите правило max-width и измените width на 500px.

источник

2014-10-06 18:37:53 STW

Я думаю, что лучшее решение, без добавления какого-либо элемента HTML, чтобы использовать изображение в качестве фона:

.test_gradient { 
    background: url('http://s14.postimg.org/zf0kd84lt/redline.jpg') repeat-y #000 center top; 
}

http://jsfiddle.net/Monteduro/jpftqc26/3/

источник

2014-10-06 18:40:06 Monte

Если вы собираетесь использовать изображение, вы можете его встроить, чтобы избежать дополнительного запроса - http: // jsfiddle. нетто/jpftqc26/7/ '.test_gradient { фон: URL (данные: изображения/PNG; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4z8AAAAMBAQAY3Y2wAAAAAElFTkSuQmCC) повторить-Y # 000 центр верхней части; размер фона: 500 пикселей; } ' – STW

op специально запрашивает градиент в css – Phlume

Да. вы можете сделать это с помощью жестких точек пикселей и использования функции calc. Просто установите их как таковые:

http://jsfiddle.net/jpftqc26/9/

CSS:

.test_gradient { 
background: 
linear-gradient(
     to right, 
     #000000 0px, /* Starting point */ 
     #000000 calc(50% - 250px), /* End black point */ 
     #ff0000 calc(50% - 250px), /* Starting red point */ 
     #ff0000 calc(50% + 250px), /* End red point */ 
     #000000 calc(50% + 250px), /* Starting black point */ 
     #000000 100% /* End black point */ 
    );

источник

2014-10-06 18:53:50 Phlume

Phlume, потрясающая идея! Разрешение независимое. Будет проверять поддержку браузера для вычисления и вернется с принятым ответом через несколько часов! – Malasorte

может потребоваться префикс поставщика, так как он появляется css, поэтому используйте его с осторожностью. Некоторые уведомления об этом здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/calc – Phlume

calc (% - px); хороший трюк – Kareem

Другой способ сделать это, без использования выч(), состоит в использовании 2 различных градиентов

.test_gradient { 
background-image: 
linear-gradient(to left, #ff0000 0px, #ff0000 250px, #000000 100px), linear-gradient(to right, red 0px, #ff0000 250px, #000000 100px); 

background-size: 50.1% 1000px; 
background-position: top left, top right; 
background-repeat: no-repeat; 
}

Один идет направо, другой налево, и каждый из них имеет половину общей ширины

fiddle

источник

2014-10-06 19:15:11 vals

CSS градиент: определить ширину в пикселях

ответ

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