2012-06-27 36 views
20

Tôi có một hình ảnh trên một tệp html/trang web và tôi muốn thêm danh sách các màu có sẵn cho hình ảnh đó. Tôi muốn tạo ra những chiếc hộp hoặc các chấm rất nhỏ, một chiếc hộp nhỏ cho mọi màu sắc.Làm cách nào để tạo một hộp màu nhỏ bằng html và css?

Tôi làm cách nào để thực hiện việc này?

Cảm ơn!

+0

Đó là thẻ không hợp lệ. Bạn có lẽ nên sử dụng [html], [css] và có lẽ một cái gì đó nhiều hơn nữa. – Nit

+0

Bạn có ý nghĩa gì với "danh sách các màu hiện có cho bức ảnh đó"? Bạn có nghĩa là các màu sắc thực sự được sử dụng trong hình ảnh? – Mawg

Trả lời

62

Bạn có thể tạo chúng dễ dàng bằng cách sử dụng khả năng nổi của CSS chẳng hạn. Tôi đã tạo một ví dụ nhỏ trên Jsfiddle over here, tất cả css và html có liên quan cũng được cung cấp ở đó.

.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>

0

Nếu bạn muốn tạo một dấu chấm nhỏ, chỉ cần sử dụng biểu tượng từ chữ tuyệt vời.

fa fa-circle 
Các vấn đề liên quan