Khi thiết kế một trang web, bạn có thể quyết định rằng bạn muốn một phần tử trên trang web xuất hiện trong suốt hơn các phần tử khác. Ví dụ, bạn có thể đang thiết kế một trang web với một số hình ảnh mà bạn muốn có vẻ trong suốt.
Đó là nơi xuất hiện thuộc tính độ mờ CSS. Thuộc tính độ mờ CSS được sử dụng để chỉ định độ trong suốt của phần tử web.
Hướng dẫn này sẽ thảo luận, có tham chiếu đến các ví dụ, cách sử dụng thuộc tính opacity để làm cho các phần tử trong suốt trên một trang web. Khi đọc xong hướng dẫn này, bạn sẽ trở thành một chuyên gia làm việc với thuộc tính opacity trong CSS.
Thuộc tính độ mờ của CSS
Thuộc tính opacity của CSS làm cho các phần tử có thể nhìn xuyên qua hoặc trong suốt.
Giá trị của thuộc tính opacity nằm trong khoảng từ 0 đến 1. Giá trị của thuộc tính opacity càng thấp thì phần tử càng xuất hiện trong suốt. Vì vậy, giá trị 0 sẽ làm cho một phần tử hoàn toàn không trong suốt hoặc hoàn toàn trong suốt và giá trị 1 sẽ làm cho một phần tử xuất hiện như bình thường.
Đây là cú pháp cho thuộc tính độ mờ CSS:
img { opacity: 0.5; }
Ví dụ trên sẽ đặt độ mờ của bất kỳ img nào các phần tử trên trang web bằng 0,5. Điều này có nghĩa là tất cả các hình ảnh sẽ xuất hiện trong suốt hơn 50% so với mặc định.
Thuộc tính opacity được áp dụng cho cả phần tử mẹ và bất kỳ phần tử con nào mà phần tử mẹ chứa. Điều này có nghĩa là nếu bạn áp dụng thuộc tính opacity cho một hộp bao gồm văn bản, cả hộp và văn bản sẽ bị mờ.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Bây giờ chúng ta đã thảo luận về cú pháp của thuộc tính opacity, chúng ta có thể xem qua một vài ví dụ về cách sử dụng thuộc tính này trong thực tế.
Tạo hình ảnh trong suốt
Giả sử bạn đang thiết kế một trang web mà bạn muốn hình ảnh xuất hiện trong suốt. Bạn có thể hoàn thành mục tiêu này bằng cách sử dụng thuộc tính CSS opacity.
Dưới đây là một ví dụ về độ mờ được sử dụng để đặt hình ảnh thành độ mờ 0,7 (làm cho hình ảnh không trong suốt 70%):
img {
opacity: 0.7;
}
Mã của chúng tôi trả về:
Ở phía bên trái, chúng tôi đã tạo một hình ảnh không có giá trị độ mờ được đặt. Điều này có nghĩa là hình ảnh không trong suốt. Ở phía bên phải, chúng tôi đã tạo một hình ảnh và đặt giá trị độ mờ của nó thành 0,7. Kết quả là hình ảnh bên phải trong suốt hơn hình ảnh bên trái.
Kích hoạt Độ mờ khi Di chuột
Khi bạn đang làm việc với thuộc tính độ mờ, bạn có thể quyết định rằng bạn muốn hình ảnh có vẻ mờ hơn hoặc ít hơn khi người dùng di chuột qua hình ảnh.
Bộ chọn:hover CSS có thể được sử dụng kết hợp với thuộc tính mức độ mờ để thay đổi mức độ trong suốt của hình ảnh khi người dùng di chuột qua hình ảnh.
Giả sử chúng tôi muốn hình ảnh của mình trong suốt 50% (hay nói cách khác, có giá trị độ mờ là 0,5) theo mặc định. Chúng tôi cũng muốn đặt giá trị của độ mờ thành 1 khi người dùng di chuột qua hình ảnh của chúng tôi. Chúng tôi có thể hoàn thành nhiệm vụ này bằng cách sử dụng mã sau:
.img {
opacity: 0.5;
}
.img:hover {
opacity: 1;
}
Đây là kết quả của mã của chúng tôi:
Ở bên trái, bạn có thể xem ví dụ về hình ảnh của chúng tôi khi người dùng đang di chuột qua phần tử bằng con trỏ của họ. Ở bên phải, bạn có thể thấy hình ảnh của chúng tôi xuất hiện như thế nào khi người dùng không di chuột qua phần tử bằng con trỏ của họ.
Theo mặc định, hình ảnh của chúng tôi trong suốt 50%, nhưng khi người dùng di chuột qua hình ảnh, độ mờ của hình ảnh của chúng tôi được đặt thành 1 và hình ảnh của chúng tôi sẽ hiển thị đầy đủ.
Hộp trong suốt
Phần tử opacity cũng có thể được sử dụng để làm cho hộp trong suốt trong CSS.
Khi bạn sử dụng thuộc tính opacity để làm cho một phần tử trong suốt, mọi phần tử trong phần tử đó cũng sẽ chia sẻ độ mờ mà bạn chỉ định.
Giả sử chúng ta có hai phần tử
.div1 {
background-color: #B5651D;
opacity: 0.5;
text-align: center;
padding: 20px;
color: black;
}
Mã của chúng tôi trả về:
Trong ví dụ này, chúng tôi đã tạo hai hộp. Hộp trên cùng có cùng kiểu với hộp dưới cùng, nhưng không có giá trị độ mờ được chỉ định. Hộp dưới cùng có giá trị opacity là 0,5 được đặt, có nghĩa là hộp xuất hiện trong suốt 50%.
Như bạn có thể thấy, văn bản trong hộp dưới cùng của chúng tôi cũng mờ hơn. Điều này là do tất cả các phần tử bên trong hộp
Độ trong suốt của màu RGBA
Trong các ví dụ của chúng tôi ở trên, chúng tôi đã sử dụng thuộc tính opacity để làm cho các phần tử ngày càng ít mờ hơn. Tuy nhiên, có một cách tiếp cận khác mà bạn có thể sử dụng để làm cho một phần tử trong suốt:đặt màu nền của một phần tử bằng cách sử dụng các giá trị màu RGBA.
Khi làm việc với màu sắc, bạn sẽ thường sử dụng RGB để chỉ định giá trị màu. Ngoài việc sử dụng RGB, bạn cũng có thể chỉ định giá trị alpha (RGBA), giá trị này đặt độ mờ của màu bạn đã chỉ định.
Cách tiếp cận này hữu ích vì nó cho phép bạn đặt độ mờ cho màu nền của phần tử, màu này sẽ không được áp dụng cho bất kỳ phần tử nào trong phần tử được làm trong suốt hơn. Điều này không giống như thuộc tính opacity, được áp dụng cho tất cả các phần tử bên trong phần tử mà giá trị opacity được chỉ định.
Hãy lấy ví dụ về hộp màu nâu của chúng ta ở phần trước. Nếu chúng tôi muốn làm cho hộp của mình trong suốt 70%, nhưng không làm cho văn bản bên trong hộp, chúng tôi có thể sử dụng mã sau:
.div1 {
text-align: center;
padding: 20px;
color: black;
background: rgba(181, 101, 29, 0.3);
}
Mã của chúng tôi trả về:
Giá trị độ mờ mà chúng tôi chỉ định trong mã của chúng tôi là 0,3. Điều này là do độ mờ càng thấp, phần tử xuất hiện càng trong suốt và độ mờ 0,3 có nghĩa là phần tử sẽ trong suốt 70%. Chúng tôi cũng đã đặt màu văn bản của chúng tôi là màu đen trong ví dụ này.
Hộp trên cùng là một ví dụ về
rgba() giá trị để đặt độ mờ của nó thành 0,3. Như bạn có thể thấy, hộp dưới cùng của chúng tôi trong suốt hơn đáng kể so với hộp trên cùng.
Tuy nhiên, nội dung của hộp của chúng tôi — văn bản This is a box . — Không minh bạch hơn nữa. Điều này là do chúng tôi đặt màu nền của hộp là trong suốt.
Kết luận
Thuộc tính opacity của CSS được sử dụng để đặt độ trong suốt của một phần tử trên trang web.
Hướng dẫn này đã thảo luận, có tham chiếu đến các ví dụ, cách sử dụng thuộc tính opacity để thay đổi độ mờ của hình ảnh và hộp. Hướng dẫn này cũng khám phá cách sử dụng màu RGBA để tạo hiệu ứng trong suốt trong CSS. Giờ đây, bạn đã được trang bị kiến thức cần thiết để bắt đầu làm việc với thuộc tính opacity như một người chuyên nghiệp!