Làm cách nào để xóa CSS nền trong suốt?

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('https://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ử

.