Đổ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 lúc 3:12 PM.

  1. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    851
    Đã được thích:
    72
    Điểm thành tích:
    28
    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

  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,521
    Đã được thích:
    1,095
    Đ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;
    }
     
    seolagi thích bài này.
  3. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    851
    Đã được thích:
    72
    Điểm thành tích:
    28
    Cảm ơn ad, em đã đổi màu được rồi.

    doi-mau-svg.jpg
     


Like và Share ủng hộ ITSEOVN