Nếu bạn muốn xóa độ mờ hoặc độ trong suốt khỏi thanh điều hướng cố định, chỉ cần điều hướng đến Tùy chọn chủ đề -> Chung -> CSS bổ sung và sao chép/dán mã này và lưu các thay đổi
1
2
3
tiêu đề dính {
lai lịch. rgb[252, 252, 252, 1]. quan trọng;
}
Bạn cũng có thể điều chỉnh độ mờ bằng cách thay đổi giá trị “1” ở cuối câu lệnh CSS. Các giá trị được chấp nhận nằm trong khoảng từ 0 – 1 và 0. 5 đại diện cho 50% chẳng hạn
Ngoài ra, nếu bạn không muốn tiêu đề dính màu trắng, bạn có thể thay đổi màu bằng 3 giá trị rgba đầu tiên
Không có thuộc tính background-opacity
trong CSS, nhưng bạn có thể giả mạo nó bằng cách chèn một phần tử giả có độ mờ thông thường bằng kích thước chính xác của phần tử đằng sau nó
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url[image.jpg];
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Để hiển thị hình ảnh có nền trong suốt, hãy đưa 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
Mức độ mờ mô tả mức độ trong suốt, trong đó 1 hoàn toàn không trong suốt, 0. 5 là nhìn xuyên thấu 50% và 0 là hoàn toàn trong suốt
độ mờ 0. 2
độ mờ 0. 5
độ mờ 1
[vỡ nợ]
Ghi chú. 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ó cũng trở nên 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. Nếu bạn không muốn áp dụng độ mờ cho các phần tử con, thay vào đó hãy sử dụng các giá trị màu RGBA [Xem phần "Ví dụ khác" bên dưới]
Đưa ra bản chạy thử ❯
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính
Độ mờ đặc tính4. 09. 02. 03. 19. 0
Ghi chú. IE8 và các phiên bản cũ hơn hỗ trợ một giải pháp thay thế, thuộc tính bộ lọc. Giống. lọc. Alpha[độ mờ=50]
Cú pháp CSS
độ mờ đục. số. ban đầu. thừa kế;
Giá trị tài sản
ValueDescriptionDemonumberChỉ định độ mờ. từ 0. 0 [hoàn toàn trong suốt] đến 1. 0 [hoàn toàn mờ]Bản trình diễn ❯initialĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế
Thêm ví dụ
Thí dụ
Thuộc tính opacity thêm độ trong suốt cho nền của một phần tử và cho tất cả các phần tử con của nó. Điều này làm cho văn bản bên trong phần tử trong suốt khó đọc
div. đầu tiên {
độ mờ đục. 0. 1;
}
div. thứ hai {
độ mờ đục. 0. 3;
}
div. ngày thứ ba {
độ mờ đục. 0. 6;
}
Thí dụ
Để không áp dụng độ mờ cho các phần tử con [như trong ví dụ trên], hãy sử dụng các giá trị màu RGBA thay thế. Ví dụ sau đặt độ mờ cho màu nền nhưng không đặt cho văn bản
Như chúng ta đã biết, hình nền được thao tác với thuộc tính background-image của CSS, thuộc tính này có thể chỉ định một hoặc nhiều hình ảnh cho một phần tử. Tuy nhiên cũng có trường hợp chúng ta không muốn có ảnh nền và muốn loại bỏ nó. Điều này khá dễ dàng
Trong hướng dẫn của chúng tôi, chúng tôi sẽ chỉ ra cách xóa hình nền bằng một vài bước
Bắt đầu với việc tạo HTML
- sử dụng một
yếu tố
- Sử dụng ba
yếu tố
- Cho lần thứ hai
, hãy sử dụng thuộc tính id có tên "no-background"
Example
Đầu tiên, thêm phong cách vào đầu tiên và cuối cùng
yếu tố
div {
height: 170px;
width: 300px;
margin-bottom: 20px;
background-color: #CDCDCD;
border: 2px solid #CDCDCD;
background-image: url['//images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'];
background-repeat: no-repeat;
background-size: 100%;
}
Bây giờ, chúng ta có thể tạo kiểu cho
với "id" có tên là "no-background" và chỉ xóa hình nền của cái này
yếu tố
- Đặt thuộc tính hình nền thành "không"
div#no-background {
background-image: none;
}
Hãy xem kết quả của mã của chúng tôi
The title of the document
Example
Vì vậy, chúng tôi đã trình bày một ví dụ trong đó chúng tôi sử dụng ba
phần tử nhưng đã xóa hình nền của chỉ một phần tử
.