CSS trong suốt

1 năms trước

Trả lời: 0

Lượt xem: 27

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ó

Nội dung chính Show

Phương pháp 2. Sử dụng thuộc tính Opacity để đặt màu nền trong suốt trong CSS
Sự kết luận
Minh bạch trong CSS là gì?
Màu gì trong suốt trong CSS?
Làm cách nào để xóa CSS nền trong suốt?
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?

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;   
}

Trong CSS, thuộc tính “background-color” được sử dụng để gán một màu khác cho nền. Hơn nữa, sử dụng thuộc tính màu nền theo một cách cụ thể cũng có thể đặt độ trong suốt của các phần tử khác nhau

Thí dụ

Đây là trang HTML của chúng tôi với hai nền, một là hình ảnh và nền kia là nền của vùng chứa. Chúng tôi muốn làm cho nền của vùng chứa trong suốt để chúng tôi có thể nhìn xuyên qua hình ảnh được thêm vào vì độ trong suốt của vùng chứa

In our HTML file, we have added a “

” tag with a class named “bg” inside a div element and placed it inside the “” tag:
< div >

< h1 class="bg">Transparent</h1>

</div>
Trong tệp CSS, hãy sử dụng “. ” trước “bg” để khai báo nó là một lớp. Sau đó, thêm thuộc tính màu nền cùng với giá trị rgba, gán phần đệm “100px” và đặt màu văn bản là “trắng”. Vì bảng màu rgba có định dạng phù hợp, chúng tôi sẽ đặt tất cả các giá trị của nó thành 0 ngoại trừ giá trị cuối cùng. Đặt giá trị cuối cùng thành “. 25” để có bóng râm trong suốt. Tuy nhiên, nó có thể được thay thế bằng “0” để có bóng trong suốt rõ ràng
Trong bước tiếp theo, hãy gán cho div một phần đệm “200px” và đặt URL của hình nền mong muốn
Ghi chú. Chúng tôi chưa xóa màu nền được đặt trước đó là “aqua”. Do đó, nền trong suốt của vùng chứa sẽ hiển thị rõ ràng bằng bảng màu rgba
>. bg {màu nền . màu nước ;màu nền . rgba (0 ,0 . 25 );màu . màu trắng ;phần đệm . 100px ;}div { . 200px ;nền . URL (Bản gốc. jpg );}>

.bg {

background-color: aqua;

background-color: rgba(0, 0, 0, .25);

color: white;

padding: 100px;

}

div {

padding: 200px;

background: URL(Originals.jpg);

}

>
Như bạn có thể thấy, chúng ta đã thiết lập thành công màu nền trong suốt bằng cách sử dụng thuộc tính background-color
Bây giờ, hãy xem phương pháp sử dụng thuộc tính CSS khác để đặt màu nền trong suốt

Phương pháp 2. Sử dụng thuộc tính Opacity để đặt màu nền trong suốt trong CSS

Trong CSS, thuộc tính “opacity” được sử dụng để làm cho các phần tử trở nên trong suốt. Tuy nhiên, luôn có các mức minh bạch có thể được chỉ định, chẳng hạn như 1 – 100 (%). Chẳng hạn, một phần tử có độ mờ “0” sẽ hoàn toàn trong suốt

ví dụ 1

Trong ví dụ này, chúng tôi sẽ chỉ định “0. 2” giá trị độ mờ thành “. lớp bg. Tất cả các tài sản khác sẽ được giữ nguyên

>. bg {màu nền . nước ;độ mờ . 0. 2 ;màu . màu trắng ;phần đệm . 100px ;}div { . 200px ;nền . url (Bản gốc. jpg );}>

.bg {

background-color: aqua;

opacity: 0.2;

color: white;

padding: 100px;

}

div {

padding: 200px;

background: url(Originals.jpg);

}

>

Đến đây, chúng ta đã thiết lập nền trong suốt thành công

Tuy nhiên, đặt độ mờ cũng áp dụng hiệu ứng trong suốt cho văn bản được thêm vào. Để giải quyết một tình huống như vậy, hãy lấy một ví dụ khác

ví dụ 2

Khi bạn chỉ định một giá trị độ mờ, nó sẽ được áp dụng cho mọi phần tử trong vùng chứa được chỉ định có cùng một lớp. Tuy nhiên, việc thay đổi loại văn bản được thêm vào có thể giải quyết vấn đề đã nêu

To do so, we will assign the class “text” to

tag and class “bg” to the
tag:
< div >

lớp="bg"></main>

<h1 class="text">Transparent </h1>

</div>
Bây giờ, văn bản “Trong suốt” thuộc về một lớp khác “. chữ". Vì vậy, chúng tôi sẽ chỉ định “vị trí” của nó và đặt cho nó giá trị “tuyệt đối”, gán giá trị thuộc tính “margin-top” là “-9%” và giá trị “margin-left” là “50px” để có được văn bản trên
.text {

vị trí. tuyệt đối;

lề trên. -9%;

lề trái. 50px;

màu. trắng;

}
Có thể thấy rằng bây giờ độ mờ chỉ được áp dụng cho vùng chứa để làm cho vùng chứa trong suốt mà không thay đổi văn bản đã thêm
Chúng tôi đã cung cấp những cách dễ nhất để đặt màu nền trong suốt trong CSS
Sự kết luận
Để đặt màu nền trong suốt trong CSS, bạn có thể sử dụng thuộc tính “background-color” với giá trị rgba và thuộc tính “opacity”. Thuộc tính màu nền có thể được sử dụng hai lần, một để đặt nền ban đầu và lần thứ hai để làm cho nền đầu tiên trong suốt bằng bảng màu rgba. Tuy nhiên, giá trị thuộc tính độ mờ được áp dụng cho tất cả các thành phần của lớp cụ thể mà nó được xác định. Trong bài viết này, chúng tôi đã đề cập đến hai phương pháp hiệu quả để đặt màu nền trong suốt trong CSS

Minh bạch trong CSS là gì?

Màu trong suốt trong CSS hiển thị các thành phần nền từ một thành phần khác trên cùng của trang . Màu trong suốt có thể được áp dụng với thuộc tính màu nền và màu. Nếu chúng ta lấy màu nền là trong suốt thì nó sẽ hiển thị hoàn toàn các phần tử mặt sau của nền.

Màu gì trong suốt trong CSS?

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

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

Đầu tiên, thêm kiểu cho phần tử .

Set the height and width of the
..

Chỉ định các thuộc tính lề dưới, màu nền và đường viền

Sử dụng thuộc tính hình nền với giá trị "url"

Đặt lặp lại nền thành "không lặp lại"

Thêm kích thước nền

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?

Tỷ lệ phần trăm độ mờ được tính như Độ mờ% = Độ mờ * 100 Để chỉ đặt độ mờ cho nền chứ không phải văn bản bên trong. Nó có thể được đặt bằng cách sử dụng các giá trị màu RGBA thay vì thuộc tính độ mờ vì sử dụng thuộc tính độ mờ có thể làm cho văn bản bên trong phần tử đó hoàn toàn trong suốt.

programming css