Hướng dẫn how do i fill an image with color in css? - làm cách nào để tô một hình ảnh bằng màu trong css?
648 Show
Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm. Với PNG trong suốt hiển thị hình dạng đơn giản màu trắng, có thể thay đổi màu này bằng cách nào đó thông qua CSS không? Một số loại lớp phủ hoặc những gì không?
John Slegers 42.9K22 Huy hiệu vàng194 Huy hiệu bạc163 Huy hiệu đồng22 gold badges194 silver badges163 bronze badges Hỏi ngày 14 tháng 9 năm 2011 lúc 11:53Sep 14, 2011 at 11:53 4 Bạn có thể sử dụng các bộ lọc với 0 và 1: Bộ lọc còn tương đối mới với trình duyệt nhưng được hỗ trợ trong hơn 90% trình duyệt theo bảng Caniuse sau: https://caniuse.com/#feat=css-FiltersBạn có thể thay đổi một hình ảnh thành thang độ xám, sepia và nhiều hơn nữa (nhìn vào ví dụ). Vì vậy, bây giờ bạn có thể thay đổi màu của tệp PNG với các bộ lọc.
Nguồn
Maxigui 5.9014 Huy hiệu vàng14 Huy hiệu bạc32 Huy hiệu đồng4 gold badges14 silver badges32 bronze badges Đã trả lời ngày 5 tháng 1 năm 2014 lúc 12:03Jan 5, 2014 at 12:03
Р ра 26 theРАВИ 10,8K5 Huy hiệu vàng29 Huy hiệu bạc39 Huy hiệu đồng5 gold badges29 silver badges39 bronze badges 19 Bạn có thể muốn xem các phông chữ biểu tượng. http://css-tricks.com/examples/iconfont/ EDIT: Tôi đang sử dụng Font-Wayese trong dự án mới nhất của mình. Bạn thậm chí có thể bootstrap nó. Đơn giản chỉ cần đặt cái này vào 2 của bạn:
Và sau đó tiếp tục và thêm một số liên kết biểu tượng như thế này:
Đây là bảng gian lận đầy đủ --edit-- FONT-WEGESETHER sử dụng các tên lớp khác nhau trong phiên bản mới, có lẽ vì điều này làm cho các tệp CSS nhỏ hơn rất nhiều và để tránh các lớp CSS mơ hồ. Vì vậy, bây giờ bạn nên sử dụng:
Chỉnh sửa 2: Chỉ cần tìm ra GitHub cũng sử dụng phông chữ biểu tượng của riêng mình: Octicons, nó miễn phí tải xuống. Họ cũng có một số lời khuyên về cách tạo phông chữ biểu tượng của riêng bạn.
Max Hodges 5.09411 Huy hiệu vàng49 Huy hiệu bạc68 Huy hiệu đồng11 gold badges49 silver badges68 bronze badges Đã trả lời ngày 13 tháng 11 năm 2012 lúc 8:15Nov 13, 2012 at 8:15
Jules Collejules ColleJules Colle 10,7K7 Huy hiệu vàng56 Huy hiệu bạc64 Huy hiệu Đồng7 gold badges56 silver badges64 bronze badges 3 Một dòng đơn giản nhất làm việc cho tôi:
Bạn có thể điều chỉnh độ mờ từ 0 đến 1 để làm cho màu sáng hoặc tối hơn. Đã trả lời ngày 8 tháng 11 năm 2018 lúc 10:43Nov 8, 2018 at 10:43
RehmatrehmatRehmat 1.9252 huy hiệu vàng22 Huy hiệu bạc27 Huy hiệu đồng2 gold badges22 silver badges27 bronze badges 7 Tôi đã có thể làm điều này bằng cách sử dụng bộ lọc SVG. Bạn có thể viết một bộ lọc nhân màu của hình ảnh nguồn với màu bạn muốn thay đổi. Trong đoạn mã bên dưới, màu lũ là màu chúng ta muốn thay đổi màu hình ảnh thành (màu đỏ trong trường hợp này.) Fecomposite cho bộ lọc biết cách chúng ta xử lý màu. Công thức cho fecomy với số học là (k1*i1*i2 + k2*i1 + k3*i2 + k4) trong đó i1 và i2 là màu nhập cho in/in2 phù hợp. Vì vậy, chỉ định chỉ K1 = 1 có nghĩa là nó sẽ chỉ làm i1*i2, có nghĩa là nhân cả hai màu nhập với nhau.flood-color is the color we want to change image color to (which is Red in this case.) feComposite tells the filter how we're processing the color. The formula for feComposite with arithmetic is (k1*i1*i2 + k2*i1 + k3*i2 + k4) where i1 and i2 are input colors for in/in2 accordingly. So specifying only k1=1 means it will do just i1*i2, which means multiplying both input colors together. Lưu ý: Điều này chỉ hoạt động với HTML5 vì điều này đang sử dụng nội tuyến SVG. Nhưng tôi nghĩ rằng bạn có thể thực hiện công việc này với trình duyệt cũ bằng cách đưa SVG vào một tệp riêng. Tôi chưa thử cách tiếp cận đó. Đây là đoạn trích:
Đã trả lời ngày 23 tháng 9 năm 2015 lúc 9:52Sep 23, 2015 at 9:52
4 Đúng :)
Đã trả lời ngày 14 tháng 9 năm 2011 lúc 11:58Sep 14, 2011 at 11:58
benhowdle89benhowdle89benhowdle89 36K65 Huy hiệu vàng200 Huy hiệu bạc324 Huy hiệu đồng65 gold badges200 silver badges324 bronze badges 2 Hãy nghĩ rằng tôi có một giải pháp cho điều này là a) chính xác những gì bạn đang tìm kiếm 5 năm trước và b) đơn giản hơn một chút so với các tùy chọn mã khác ở đây. Với bất kỳ png trắng nào (ví dụ, biểu tượng màu trắng trên nền trong suốt), bạn có thể thêm một :: sau khi chọn để tái tạo.
Xem Codepen này (áp dụng hoán đổi màu trên di chuột): http://codepen.io/chrscblls/pen/bwaxzo Đã trả lời ngày 30 tháng 9 năm 2016 lúc 16:54Sep 30, 2016 at 16:54
chrscbllschrscbllschrscblls 5552 Huy hiệu vàng7 Huy hiệu bạc16 Huy hiệu đồng2 gold badges7 silver badges16 bronze badges 3 Thẻ IMG có một thuộc tính nền giống như bất kỳ thuộc tính nào khác. Nếu bạn có PNG màu trắng với hình dạng trong suốt, giống như một stprint, thì bạn có thể làm điều này:
|