Css xóa nền trắng khỏi hình ảnh

Chúng tôi đã thiết kế công cụ của mình để xóa nền trắng của hình ảnh bằng cách sử dụng tập lệnh phía máy khách. Không tải lên, chỉ cần chọn hình ảnh của bạn trong công cụ, đặt mức trắng bẩn và nhấp vào nút xóa nền trắng để xóa tất cả vùng trắng trong hình ảnh đã chọn. Áp dụng cấp độ trắng bẩn, giúp loại bỏ tất cả các biến thể của màu trắng trong ảnh

Để hiển thị hình ảnh có nền trong suốt, hãy thêm phần sau vào CSS khi tạo hình ảnh của bạn

body { 
  background-color: transparent;
}

Thí dụ

Hình ảnh này có

mix-blend-mode: multiply;

0 được đặt trên

mix-blend-mode: multiply;

1

Hãy tự mình thử

---

Hình ảnh URL

Khi tạo một hình ảnh từ một URL. Vượt qua cùng một CSS trong thông số CSS và nền sẽ được hiển thị trong suốt

Chỉ hoạt động với PNG

Độ trong suốt chỉ được hỗ trợ bởi định dạng tệp PNG. Theo mặc định, tất cả các hình ảnh được hiển thị dưới dạng PNG. Nếu bạn kết xuất hình ảnh dưới dạng JPG hoặc Webp, nền sẽ có màu trắng

---

Cần giúp đỡ?

Nói chuyện với một con người. support@htmlcsstoimage. com. Chúng tôi luôn trả lời trong vòng 24 giờ. Và thường xuyên, thậm chí nhanh hơn

Vì vậy, tôi đang xây dựng một chủ đề WP cao cấp phù hợp với các trang web đánh giá sản phẩm và Chi nhánh – và tôi hy vọng sẽ phát hành nó vào cuối năm nay. Tôi vừa mới làm việc trên một trang giới thiệu đánh giá sản phẩm, nơi tôi đã tải lên hình ảnh của một chiếc MacBook Pro và tôi muốn thay đổi màu nền cho tiêu đề của thẻ sản phẩm này

Và tôi nhận thấy nền trắng của hình ảnh trông không đẹp lắm trên nền xám

Thay vì đưa hình ảnh này vào photoshop, xóa nền và tải nó lên WordPress – điều gì sẽ xảy ra nếu tôi có thể xử lý việc này ngay tại đây trong trình chỉnh sửa Gutenberg?

Chà, chúng ta có thể… và chỉ với một nút bấm

Ảnh chụp màn hình ở trên hiển thị trường ACF thêm một dòng CSS vào hình ảnh. Đây là một giải pháp CSS thuần túy và nó hoạt động trong hầu hết các trình duyệt hiện đại

mix-blend-mode: multiply;

chế độ hòa trộn. nhân;

Khi bạn đã có trong tay chủ đề này, bạn có thể dễ dàng kiểm tra và xem nó hoạt động như thế nào trong trường hợp sử dụng của riêng bạn

Thuộc tính

mix-blend-mode: multiply;

2 trong CSS cho phép bạn kiểm soát nền của bất kỳ phần tử nào (phần tô màu bên dưới nội dung trong phần tử đó). Nó là một thuộc tính tốc ký, có nghĩa là nó cho phép bạn viết nhiều thuộc tính CSS trong một. Như thế này

body {
  background:
     url(sweettexture.jpg)    /* image */
     top center / 200px 200px /* position / size */
     no-repeat                /* repeat */
     fixed                    /* attachment */
     padding-box              /* origin */
     content-box              /* clip */
     red;                     /* color */
}

mix-blend-mode: multiply;

2 được tạo thành từ tám tài sản khác

• mix-blend-mode: multiply;

  4

• mix-blend-mode: multiply;

  5

• mix-blend-mode: multiply;

  6

• mix-blend-mode: multiply;

  7

• mix-blend-mode: multiply;

  8

• body {
    background-color: red;
    background: url(sweettexture.jpg);
  }

  0

• body {
    background-color: red;
    background: url(sweettexture.jpg);
  }

  1

• body {
    background-color: red;
    background: url(sweettexture.jpg);
  }

  2

Bạn có thể sử dụng bất kỳ sự kết hợp nào của các thuộc tính này mà bạn thích, theo hầu hết mọi thứ tự (mặc dù thứ tự được đề xuất trong thông số kỹ thuật ở trên). Có một gotcha mặc dù. bất kỳ thứ gì bạn không chỉ định trong thuộc tính

mix-blend-mode: multiply;

2 sẽ tự động được đặt thành mặc định. Vì vậy, nếu bạn làm một cái gì đó như thế này

body {
  background-color: red;
  background: url(sweettexture.jpg);
}

Nền sẽ trong suốt, thay vì màu đỏ. Cách khắc phục rất dễ dàng. chỉ cần xác định

body {
  background-color: red;
  background: url(sweettexture.jpg);
}

2 sau

mix-blend-mode: multiply;

2 hoặc chỉ sử dụng tốc ký (e. g.

body {
  background-color: red;
  background: url(sweettexture.jpg);
}

6)

Nhiều hình nền

CSS3 đã thêm hỗ trợ cho nhiều nền, lớp này chồng lên nhau. Bất kỳ thuộc tính nào liên quan đến hình nền đều có thể lấy danh sách được phân tách bằng dấu phẩy, như thế này

body {
  background: url(sweettexture.jpg), url(texture2.jpg) black;
  background-repeat: repeat-x, no-repeat;
}

Mỗi giá trị trong danh sách được phân tách bằng dấu phẩy tương ứng với một lớp. giá trị đầu tiên là lớp trên cùng, giá trị thứ hai là lớp thứ hai và màu nền luôn là lớp cuối cùng

Thử nghiệm

Dự phòng nhúng CodePen

hỗ trợ trình duyệt

Hỗ trợ khác nhau giữa các thuộc tính cụ thể khác nhau và mỗi bài viết tương ứng trong Almanac có ghi chú hỗ trợ trình duyệt duy nhất. Mặc dù vậy, các hình nền đơn màu cơ bản và các hình ảnh đơn lẻ hoạt động ở mọi nơi và mọi thứ không được hỗ trợ sẽ chỉ quay trở lại điều tốt nhất tiếp theo, cho dù đó là hình ảnh hay màu sắc