У меня есть изображение на html-файле/сайте, и я хочу добавить список доступных цветов для этого изображения. Я хочу создать очень маленькие коробки или точки, небольшую коробку для каждого цвета.Как создать небольшой цветной блок с помощью html и css?
Как я могу это сделать?
Спасибо!
Вы можете создать их легко, используя плавающую способность CSS, например. Я создал небольшой пример на Jsfiddle over here, все связанные css и html также предоставляются там.
.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
}
.blue {
background: #13b4ff;
}
.purple {
background: #ab3fdd;
}
.wine {
background: #ae163e;
}<div class="foo blue"></div>
<div class="foo purple"></div>
<div class="foo wine"></div>Если вы хотите, чтобы создать маленькие точки, просто использовать иконку из шрифта удивительном.
fa fa-circle
Это плохой тег. Вероятно, вы должны использовать [html], [css] и, возможно, нечто большее. – Nit
Что вы подразумеваете под «списком доступных цветов для этой картины»? Вы имеете в виду цвета, которые на самом деле используются на картинке? – Mawg