Как добавить прозрачность к значению из цветового поля типа ввода HTML в CSS?

В моем CSS мне нужен цвет, основанный на выбранном пользователем цвете. Используемый цвет используется с фиксированной прозрачностью 80%.Как добавить прозрачность к значению из цветового поля типа ввода HTML в CSS?

Следующий элемент формы позволит пользователю легко выбрать цвет.

<input type=color value=#00ffff> // #00ffff

Но как добавить прозрачность в CSS?

rgba(#00ffff,.8) // doesn't work

Update: Я специально спросил, как это сделать в CSS, а не в JS. Кстати, это для CMS с PHP. Я не хочу навязывать JS пользователям, и я предпочитаю не писать функции преобразования в PHP.

Вероятно, я должен ждать CSS4 (SASS/МЕНЬШЕ), как функции цвета, или для цветового элемента ввода типа, чтобы быть повышена с HSLA/RGBA шаблон функциональность атрибута.

источник

2016-10-27 Janghou

Итак, вы хотите, чтобы пользователь выбрал цвет, а затем применил его с непрозрачностью 0,8 к чему-либо. Вы можете использовать цвет как обычно, а затем добавить непрозрачность: 0,8; Или преобразовать шестнадцатеричный цвет в 3 десятичных цвета и использовать rgba. –

Вы хотите, чтобы пользователь увидел прозрачность в цвете? – Roberrrt

вот пара ответов [convert-hex-to-rgba] (http://stackoverflow.com/questions/21646738/convert-hex-to-rgba) –

использования, как это,

background-color : rgba(0, 255, 255, 0.8);

см это,

http://www.wufoo.com/html5/types/6-color.html

источник

2016-10-27 08:50:02 Kushan

Можно ли использовать значения rgba внутри вашего' value = "# ff00ff"?? – Roberrrt

'' явно это не так. – Roberrrt

Что делать, если пользователь вводит '# 000'? –

-2

Попробуйте

opacity: 0.5;

Это будет отображать прозрачный цвет для пользователя выбрал один.

источник

2016-10-27 08:55:37

Это делает весь элемент прозрачным. Не цвет. – Roberrrt

вы можете сделать это с помощью jquery, вы можете применить собственный цвет с пользовательской прозрачностью к элементу.

$(document).ready(function() { 
 

 
    $("input").change(function() { 
 

 
    var opacity = $("input[type=range]").val(); 
 
    var color = $("input[type=color]").val(); 
 

 
    var rgbaCol = 'rgba(' + parseInt(color.slice(-6, -4), 16) + ',' + parseInt(color.slice(-4, -2), 16) + ',' + parseInt(color.slice(-2), 16) + ',' + opacity + ')'; 
 

 
    $('div').css('background-color', rgbaCol) 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input type=color value=#00ffff> 
 
<!-- color --> 
 
<input type="range" min="0" max="1" step="0.1"> 
 
<!-- transparency --> 
 

 
<div>this is a div</div>

источник

2016-10-27 09:30:03

Почему JQuery? Если вы можете делать с платформой, нет необходимости загружать библиотеку. –

Вы имеете в виду, что stackoverflow поддерживает jquery по умолчанию? Я плохо тебя понял @AndrewBone –

Thx, это приятное решение JS, я думаю, @Andrew задается вопросом, почему вы создали jQuery зависимость и не использовали простой JS. – Janghou

В CSS4 есть 8 digits RGB hexadecimal обозначения: #RRGGBBAA. Последняя цифра - это значения для альфа-канала.

Это позволяет легко легко соединить альфа-значение с шестнадцатеричной строкой.

В настоящий момент не поддерживается поддержкой браузера.

источник

2016-10-27 11:31:31 Janghou

no: https://caniuse.com/#feat=css-rrggbbaa –

Если вы хотите использовать этот цвет, но только зная тип HEX, попробуйте преобразовать его в RGB или HSL с помощью инструмента выбора цвета, там много онлайн. Затем просто добавьте альфа-канал (0 -1) для прозрачности. Например. Rgb (225,10,10, 0.7) Используйте это: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool

источник

2017-04-30 03:50:57

Как добавить прозрачность к значению из цветового поля типа ввода HTML в CSS?

ответ

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