Tải hình ảnh với css nền trong suốt

Trong nhiều trường hợp, bạn sẽ chỉ muốn làm cho màu nền trong suốt một phần, giữ cho văn bản và các thành phần khác mờ hoàn toàn. Để đạt được điều này, hãy sử dụng một giá trị màu có kênh alpha—chẳng hạn như. Như với opacity, giá trị của 1 đối với giá trị kênh alpha làm cho màu hoàn toàn mờ đục. Do đó, background-color: rgba(0,0,0,.5); sẽ đặt màu nền thành độ mờ 50%

Hãy thử thay đổi các giá trị kênh alpha và độ mờ trong các ví dụ bên dưới để xem nhiều hơn hoặc ít hơn hình nền phía sau hộp

Ghi chú. Hãy cẩn thận để văn bản của bạn giữ đủ độ tương phản với nền trong trường hợp bạn đang phủ một hình ả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ó background-color: transparent; đặt trên body

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

Thuộc tính opacity thường được sử dụng cùng với bộ chọn :hover để thay đổi độ mờ khi di chuột qua

Ví dụ giải thích

Khối CSS đầu tiên tương tự như mã trong Ví dụ 1. Ngoài ra, chúng tôi đã thêm điều gì sẽ xảy ra khi người dùng di chuột qua một trong các hình ảnh. Trong trường hợp này, chúng tôi muốn hình ảnh KHÔNG trong suốt khi người dùng di chuột qua nó. CSS cho điều này là opacity:1;

Khi con trỏ chuột di chuyển ra khỏi hình ảnh, hình ảnh sẽ trong suốt trở lại

Một ví dụ về hiệu ứng di chuột đảo ngược

Hộp trong suốt

Khi sử dụng thuộc tính opacity để thêm độ trong suốt cho nền của một phần tử, tất cả các phần tử con của nó sẽ thừa hưởng cùng một độ trong suốt. Điều này có thể làm cho văn bản bên trong một phần tử hoàn toàn trong suốt khó đọc

Minh bạch sử dụng RGBA

Nếu bạn không muốn áp dụng độ mờ cho các phần tử con, như trong ví dụ của chúng tôi ở trên, hãy sử dụng các giá trị màu RGBA. Ví dụ sau đặt độ mờ cho màu nền chứ không phải văn bản

Bạn đã học được từ Chương Màu sắc CSS của chúng tôi rằng bạn có thể sử dụng RGB làm giá trị màu. Ngoài RGB, bạn có thể sử dụng giá trị màu RGB với kênh alpha (RGBA) - chỉ định độ mờ cho màu

Giá trị màu RGBA được chỉ định với. rgba (đỏ, lục, lam, alpha). Tham số alpha là một số trong khoảng từ 0. 0 (hoàn toàn trong suốt) và 1. 0 (đục hoàn toàn)

Bởi Softorks. 31 Tháng Tám, 2019. cập nhật. 31 Tháng Tám, 2019

Hướng dẫn này trình bày cách bạn có thể xây dựng Loading Spinner với nền bán trong suốt
Chúng tôi sẽ sử dụng HTML, CSS và JavaScript để hoàn thành nhiệm vụ này

    
        
    
    
         Execute
        
        
    

                        

body {
    background-color: #6CC4EE;
}

#ExecButton {
    margin-top: 800px;
    margin-left: 48%;
}

#semiTransparenDiv {
	width:100%;
	
	/*-Lets Center the Spinner-*/
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    
    /*Centering my shade */
    margin-bottom: 40px;
    margin-top: 60px;
    
    background-color: rgba(255,255,255,0.7);
    z-index:9999;
    display: none; 
}

@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

#semiTransparenDiv::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:80px;height:80px;
    border-style:solid;
    border: 5px solid black;
	border-top-color: #6CC4EE;
    border-width: 7px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    
    /* Lets make it go round */
    animation: spin .8s linear infinite;
}
                        

Bạn có thể làm cho hình nền trong suốt bằng CSS không?

Làm cách nào để làm cho hình nền trong suốt trong CSS chứ không phải văn bản?

Làm cách nào để xóa nền trắng khỏi hình ảnh bằng CSS?