Đổi màu sắc icon .svg trong background image css html, change svg color in background image

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi seolagi, 23/11/21.

  1. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,028
    Đã được thích:
    80
    Điểm thành tích:
    48
    Hi mọi người, mình muốn đổi màu sắc cái hình ảnh icon file .svg nhúng vào web thông qua css của thuộc tính background image thì làm như thế nào nhỉ?: change svg color in background image.

    VD: mình có đoạn code sau, khi cài vào web thì nó ra màu mặc định là màu đen, mình muốn đổi cái màu mặc định của hình ảnh file .svg nhung vào thành màu đỏ thì làm như thế nào?
    HTML:
    .phone::before {
    display: block;
    content: ' ';
    background-image: url('/wp-content/uploads/icon/phone.svg');
    background-size: 28px 28px;
    height: 28px;
    width: 28px;
}
     
    Cảm ơn đã xem bài:

    Đổi màu sắc icon .svg trong background image css html, change svg color in background image

    seolagi, 23/11/21
    #1
  3. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,895
    Đã được thích:
    1,198
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Bạn sử dụng cái background image mặc định không đổi được đâu, sử dụng mask-image để add file .svg và dùng background-color để đổi màu nhé, đổi nó qua code sau thử nhé:
    HTML:
    .phone::before {
    display: block;
    content: ' ';
    height: 28px;
    width: 28px;
    background-color: red;
    -webkit-mask-image: url(/wp-content/uploads/icon/phone.svg);
    mask-image: url(/wp-content/uploads/icon/phone.svg);
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
     
    admin, 23/11/21
    #2
    seolagi thích bài này.
  4. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,028
    Đã được thích:
    80
    Điểm thành tích:
    48
    Cảm ơn ad, em đã đổi màu được rồi.

    doi-mau-svg.jpg
     
    seolagi, 23/11/21
    #3
  5. thieubaotran87
    Tham gia ngày:
    1/3/21
    Bài viết:
    3
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nữ
    đang quan tâm xin hóng kinh nghiệm các bác ạ
     
    thieubaotran87, 14/12/21
    #4


Chủ để tương tự : Đổi màu
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi màu sắc Input placeholder CSS HTML 5, Change Color Placeholder như thế nào 20/1/21
Ngôn ngữ lập trình CSS, HTML, HTML5 Thay đổi màu sắc Placeholder CSS thẻ Input HTML 25/9/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi icon trước thẻ tag <li> của <ul thành đấu check v xanh CSS HTML như thế nào? 21/7/22
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi ngôn ngữ, Change Language Recaptcha Google nhứ thế nào 31/8/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi từ click sang hover trong Menu Navigation Dropdown Bootstrap 13/8/18