Đổ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

    seolagi

    Moderator

     Thành viên BQT

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

    Lượt xem: 2,482 - Xem Bài Viết Cùng Chủ Đề

    seolagi, 23/11/21
    #1
  3. 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,626
    Đã được thích:
    1,131
    Đ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

    seolagi

    Moderator

     Thành viên BQT

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

    doi-mau-svg.jpg
     
    seolagi, 23/11/21
    #3
  5. thieubaotran87

    thieubaotran87 Thành Viên Mới

    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


Like và Share ủng hộ ITSEOVN