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;
1Hã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àybody {
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
4mix-blend-mode: multiply;
5mix-blend-mode: multiply;
6mix-blend-mode: multiply;
7mix-blend-mode: multiply;
8mix-blend-mode: multiply;
0body { background-color: red; background: url[sweettexture.jpg]; }
1body { background-color: red; background: url[sweettexture.jpg]; }
2body { background-color: red; background: url[sweettexture.jpg]; }
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àybody {
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