17/06/2018 09:44:59 PM

Lập trình

Bài 02- CSS –Image Opacity

CSS –Image Opacity

Thuộc tính opacity xác định độ trong suốt của một phần tử.

Độ trong suốt của hình ảnh

Thuộc tính opacity có thể được thiết lập giá trị từ 0.0 – 1.0. Với giá trị càng nhỏ thì độ trong suốt càng nhiều.

Chú ý: phiên bản IE8 trở về trước sử dụng filter:alpha(opacity=x). x có thể mang giá trị từ 0 đến 100. Giá trị càng thấp thì phần tử đó càng trong suốt.

1. img {

2. opacity: 0.5;

3. filter: alpha(opacity=50); /* For IE8 and earlier */

4. }

Hiệu ứng trong suốt khi rê chuột

Thuộc tính opacity thường được sử dụng cùng với bộ chọn :hover để thay đổi độ trong của ảnh khi rê chuột vào.

1. img {

2. opacity: 0.5;

3. filter: alpha(opacity=50); /* For IE8 and earlier */

4. }

6. img:hover {

7. opacity: 1.0;

8. filter: alpha(opacity=100); /* For IE8 and earlier */

9. }

Giải thích ví dụ:

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

Khi rê chuột vào một ảnh bất kỳ, ảnh đó sẽ mờ đi.

1. img:hover {

2. opacity: 0.5;

3. filter: alpha(opacity=50); /* For IE8 and earlier */

4. }

Hộp mờ

Khi sử dụng thuộc tính opacity để thêm độ mờ cho nền của một phần tử, tất cả phần tử con sẽ kế thừa độ mờ như nhau. Điều này làm cho văn bản trong phần tử có độ mờ cao sẽ khó đọc:

1. div {

2. opacity: 0.3;

3. filter: alpha(opacity=30); /* For IE8 and earlier */

4. }

Làm mờ sử dụng RGBA

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

Ngoài RGB, CSS3 giới thiệu giá trị màu RGB với kênh alpha (RGBA) – xác định độ mờ của màu. Giá trị màu RGBA được chỉ định bằng: rgba (đỏ, xanh, xanh, alpha). Thông số alpha là một số giữa 0,0 (hoàn toàn trong suốt) và 1,0 (đục hoàn toàn).

1. div {

2. background: rgba(76, 175, 80, 0.3)/* Green background with 30% opacity */

3. }

Văn bản ở trong hộp mờ

1. <html>

2. <head>

3. <style>

4. div.background {

5. background: url(klematis.jpg)repeat;

6. border: 2px solid black;

7. }

9. div.transbox {

10.margin: 30px;

11.background-color: #ffffff;

12.border: 1px solid black;

13.opacity: 0.6;

14.filter: alpha(opacity=60); /* For IE8 and earlier */

15.}

16.

17.div.transbox p {

18.margin: 5%;

19.font-weight: bold;

20.color: #000000;

21.}

22.</style>

23.</head>

24.<body>

25.

26.<div class="background">

27.<div class="transbox">

28.<p>This is some text that is placed in the transparent box.</p>

29.</div>

30.</div>

31.

32.</body>

33.</html>

Đầu tiên, chúng ta tạo ra một phần tử <div> (class = “background”) với một hình nền và một đường viền. Sau đó chúng ta tạo ra một <div> (class = “transbox”) bên trong <div> đầu tiên. <div class = “transbox”> có màu nền, và một đường viền – div là trong suốt. Bên trong <div> trong suốt, chúng ta thêm một số văn bản bên trong một phần tử <p>.

Xem thêm ở:

https://www.w3schools.com/css/css_image_transparency.asp

http://webcoban.vn/css/cach-su-dung-thuoc-tinh-opacity-trong-css-de-thiet-lap-do-trong-suot-cho-phan-tu-html.html

» Tin mới nhất: