Thuộc tính độ mờ CSS: kiểm soát độ trong suốt. Cách đặt độ trong suốt trong css - khối trong suốt

Để kiểm soát độ trong suốt của các thành phần trang, hãy sử dụng thuộc tính độ mờ của CSS. Theo thông số kỹ thuật, nó áp dụng cho mọi loại nút và được hỗ trợ trong tất cả các trình duyệt hiện đại. Với sự trợ giúp của nó, bạn có thể tạo ra một thiết kế thú vị hoặc triển khai tương tác người dùng tương tác thuận tiện.

Những giá trị khả thi

Cú pháp cho thuộc tính độ mờ trong css trông như thế này:

Bộ chọn (độ mờ: 1; ) bộ chọn (độ mờ: 0; ) bộ chọn (độ mờ: 0,4; )

Đầu vào chấp nhận các giá trị số trong phạm vi từ 0 đến 1. Tham số có thể biểu thị phân số của một, trong khi dấu chấm được sử dụng làm dấu phân cách cho phần nguyên và phần phân số trong CSS.

Một phần tử có độ trong suốt bằng 0 sẽ trở nên vô hình nhưng vẫn tiếp tục chiếm vị trí của nó trên trang và vẫn giữ được khả năng tương tác với người dùng.

Nếu giá trị thuộc tính khác 0 thì độ trong suốt thực tế sẽ được tính theo phần trăm của một số giới hạn trên. Trong tình huống bình thường, độ mờ: 1 xác định độ mờ hoàn toàn của phần tử.

Tính minh bạch của các nút con

Tuy nhiên, nếu phần tử có phần tử gốc có độ trong suốt khác một thì phép tính sẽ thay đổi. Con cháu không thể “kém minh bạch” hơn bất kỳ tổ tiên nào của nó. Giá trị thuộc tính CSS độ mờ của khối cha trở thành giới hạn độ mờ trên của nút con.

Cha mẹ (độ mờ: 0,7; ) con (độ mờ: 1; )

Trong tình huống này, phần tử con sẽ trong suốt 30%, mặc dù giá trị độ mờ là một.

Ví dụ về việc sử dụng

Ví dụ 1: Độ trong suốt. Điều cần thiết là nền chính của khối phải hiển thị dưới phần tử mục tiêu.

Mục tiêu (nền: đen; độ mờ: 0,5;)

Không chỉ nền của khối mục tiêu trở nên mờ mà cả văn bản cũng trở nên mờ.

Ví dụ 2: Kiểm soát độ trong suốt động. Giá trị của thuộc tính CSS opacity của khối mục tiêu thay đổi khi bạn di chuột qua nó.

Mục tiêu ( opacity: 0.2; ) .target:hover ( opacity: 1; )

Tính minh bạch động

Ví dụ cuối cùng chứng minh rằng các phần tử trong suốt tiếp tục phản hồi với các sự kiện của trang như di chuột. Điều này cho phép bạn sử dụng javascript để kiểm soát thuộc tính độ mờ CSS, cũng như sử dụng các cơ chế chuyển tiếp và hoạt ảnh để thay đổi chế độ hiển thị một cách mượt mà.

Để truy cập tính minh bạch từ tập lệnh, bạn cần truy cập đối tượng kiểu của một thành phần cụ thể.

// lấy giá trị trong suốt hiện tại var opacity = element.style.opacity; // thiết lập giá trị mới element.style.opacity = 0,4;

Sự biến mất trơn tru của một khối có thể đạt được bằng cách sử dụng thuộc tính CSS transition:

Phần tử ( độ mờ: 0,1; chuyển tiếp: độ mờ 1000ms; ) phần tử: di chuột ( độ mờ: 0,8; chuyển tiếp: độ mờ 2000ms; )

Bây giờ, nút phần tử khi được di chuột bằng chuột sẽ thay đổi độ trong suốt từ 10 thành 80% trong vòng một giây và khi con trỏ rời khỏi, nó sẽ mờ về giá trị ban đầu trong vòng hai giây.

Thuộc tính CSS opacity kết hợp với cơ chế chuyển tiếp cho phép bạn tạo ra những hiệu ứng đẹp mắt.

Kênh Alpha thay vì độ mờ

Những điểm tinh tế chính của cơ chế độ mờ trong CSS:

hiệu ứng của nó không chỉ mở rộng đến nền của khối mà còn mở rộng đến nội dung văn bản của nó, tốt nhất là để trống;
các phần tử con không thể kém minh bạch hơn các phần tử cha của chúng.

Nếu những hiệu ứng này làm phức tạp tuổi thọ của trình thiết kế bố cục, thay vì độ mờ, bạn nên sử dụng nền trong suốt đơn giản, xác định giá trị của nó ở định dạng RGBA hoặc HSLA.

Chi tiết Chuyên mục: thiết kế web Tác giả: SEO & WEB - KELL4

Tạo nền trong suốt trong HTML và CSS (hiệu ứng độ mờ và RGBA)

Hiệu ứng trong suốt phần tử được hiển thị rõ ràng trong hình nền và đã trở nên phổ biến trong các hệ điều hành khác nhau vì nó trông rất phong cách và đẹp mắt. Điều chính là không có hoa văn đơn sắc dưới các khối mờ mà là hình ảnh, trong trường hợp này độ trong suốt trở nên đáng chú ý.

Hiệu ứng này đạt được theo nhiều cách khác nhau, bao gồm các phương pháp lỗi thời như sử dụng hình ảnh PNG làm nền, tạo hình ảnh ca rô và thuộc tính độ mờ. Nhưng ngay khi có nhu cầu tạo nền mờ trong khối, các phương pháp này đều có những nhược điểm khó chịu.

Chúng ta hãy xem độ mờ của văn bản và nền - cách sử dụng nó một cách chính xác trong thiết kế trang web:

Đặc điểm chính của thuộc tính này là giá trị trong suốt ảnh hưởng đến tất cả các phần tử con bên trong nó, không chỉ nền. Điều này có nghĩa là cả nền và văn bản sẽ trở nên mờ. Bạn có thể tăng mức độ trong suốt bằng cách thay đổi lệnh độ mờ từ 0,1 thành 1.

HTML 5 CSS 3 IE 9 độ mờ đục

Xây dựng và quảng bá các trang web trên Internet

Trong thiết kế web, độ trong suốt một phần cũng được sử dụng và đạt được thông qua định dạng màu RGBA, chỉ được đặt cho nền của phần tử.

Thông thường trong một thiết kế, chỉ nền của một phần tử phải trong mờ và văn bản phải mờ để duy trì khả năng đọc. Thuộc tính opacity không phù hợp ở đây vì văn bản bên trong phần tử cũng sẽ trong suốt một phần. Tốt nhất nên sử dụng định dạng RGBA, có kênh alpha hay nói cách khác là giá trị trong suốt như một phần của nó. Giá trị được viết là rgba, sau đó các giá trị của thành phần màu đỏ, xanh dương và xanh lục được liệt kê trong ngoặc đơn, cách nhau bằng dấu phẩy. Cuối cùng là độ trong suốt, được đặt từ 0 đến 1, với 0 nghĩa là độ trong suốt hoàn toàn và độ mờ 1 màu - cú pháp sử dụng rgba.

Nền mờ HTML 5 CSS 3 IE 9 rgba

Xây dựng và quảng bá các trang web trên Internet.

Độ mờ nền được đặt thành 90% - nền bán trong suốt và văn bản mờ.

Thuộc tính CSS opacity chịu trách nhiệm về tính minh bạch của các phần tử (hình ảnh, văn bản, khối) trong html.

Cú pháp độ mờ CSS

Trong đó giá trị có thể lấy giá trị thực trong khoảng từ 0,0 đến 1,0. Giá trị 1,0 có nghĩa là không có độ trong suốt (mặc định).

Ví dụ số 1. Hình ảnh trong suốt trong html

Hình ảnh đầu tiên được hiển thị không có độ trong suốt, hình ảnh thứ hai có độ trong suốt 0,5

Độ trong suốt của phần tử

Làm cho hình ảnh mờ khi di chuột!

DemoTải về nguồn

Cám ơn vì sự quan tâm của bạn!

Bài viết tiếp theo
Làm cách nào để tạo khối div bằng cách cuộn?

Tính minh bạch trong CSS gần đây là một kỹ thuật khá phổ biến, gây khó khăn cho việc triển khai trên nhiều trình duyệt. Vẫn chưa có phương pháp chung nào cho phép thực hiện tính minh bạch cho tất cả các trình duyệt. Tuy nhiên, thời gian gần đây tình hình đã được cải thiện rõ rệt.

Bài viết này cung cấp cái nhìn chi tiết về các phương pháp hiện có cũng như các ví dụ và giải thích về mã sẽ giúp bạn đạt được kết quả tương tự trên tất cả các trình duyệt mà không cần nỗ lực nhiều.

Một điều đáng nói là mặc dù tính minh bạch đã xuất hiện được vài năm nhưng nó chưa bao giờ là một phần của tiêu chuẩn CSS. Đây là thuộc tính không chuẩn nên là một phần của đặc tả CSS3.

Cách tiếp cận cũ

Trong các phiên bản Firefox và Safari cũ hơn, bạn phải áp dụng thuộc tính như sau:
#myElement ( -khtml-opacity: .5; -moz-opacity: 0.5; )
Thuộc tính -khtml-opacity được sử dụng trong các phiên bản trình duyệt webkit cũ hơn. Thuộc tính này không còn được dùng nữa và không còn cần thiết nữa trừ khi bạn tin chắc rằng một phần đáng kể lưu lượng truy cập vào trang web của bạn đến từ khách truy cập sử dụng Safari 1.x, điều này tất nhiên là khó xảy ra.

Dòng tiếp theo sử dụng thuộc tính -moz-opacity, thuộc tính này hoạt động trên các phiên bản đầu tiên của công cụ Mozilla. Firefox đã ngừng hỗ trợ nó trong phiên bản 0.9.

Tính minh bạch của CSS trong Firefox, Safari, Chrome và Opera

Đối với hầu hết các trình duyệt hiện đại, việc sử dụng thuộc tính sau là đủ:
#myElement ( độ mờ: .7; )
Trong ví dụ trên, phần tử được đặt ở độ mờ 70% (độ trong suốt 30%). Nghĩa là, nếu chúng ta đặt giá trị thành một, phần tử sẽ mờ và theo đó, việc đặt giá trị này về 0 sẽ khiến nó trở nên vô hình.

Thuộc tính độ mờ xử lý 2 chữ số thập phân. Nghĩa là, giá trị ".01" sẽ khác với giá trị ".02", mặc dù điều này không đáng chú ý.

Tính minh bạch của CSS cho Internet Explorer

Như thường lệ, Internet Explorer không thân thiện với các trình duyệt khác. Ngoài ra, chúng tôi hiện có ba phiên bản của trình duyệt này được sử dụng khá rộng rãi, cài đặt độ trong suốt ở mỗi phiên bản là khác nhau và đôi khi cần nỗ lực thêm để đạt được kết quả khả quan.
#myElement ( bộ lọc: alpha(opacity=40); )
Ví dụ này sử dụng thuộc tính filter, hoạt động trong các phiên bản 6-8, tuy nhiên đối với phiên bản 6 và 7 có một hạn chế: thuộc tính hasLayout của phần tử phải được đặt thành true . Thuộc tính này chỉ có trong IE và bạn có thể đọc thêm về nó, chẳng hạn như trên Habré.

Một cách khác để thiết lập độ trong suốt bằng CSS trong IE8 là sử dụng phương pháp sau (lưu ý các nhận xét):
#myElement ( filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* hoạt động trong IE6, IE7 và IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * chỉ dành cho IE8 */ )
Dòng đầu tiên sẽ hoạt động trong tất cả các phiên bản hiện đang được sử dụng, dòng thứ hai - chỉ trong IE8. Lưu ý rằng dòng thứ hai sử dụng tiền tố -ms- và giá trị nằm trong dấu ngoặc kép.

Cài đặt và thay đổi tính minh bạch của CSS bằng JavaScript hoặc jQuery

Bạn có thể sử dụng đoạn mã sau để đặt độ trong suốt:
Document.getElementById("myElement").style.opacity = ".4"; // cho hầu hết các trình duyệt document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // cho IE
Tất nhiên, trong trường hợp này, việc sử dụng jQuery sẽ dễ dàng hơn nhiều, ngoài ra, nó sẽ hoạt động trên tất cả các trình duyệt:
$("#myElement").css((độ mờ: .4 )); // hoạt động trên mọi trình duyệt
Bạn có thể làm động thuộc tính này:
$("#myElement").animate(( opacity: .4 ), 1000, function() ( // Hoạt ảnh đã hoàn tất; mã này hoạt động trên tất cả các trình duyệt. ));
chức năng RGBA

CSS3 có kế hoạch hỗ trợ các kênh alpha bằng chức năng rgba. Tính năng này hoạt động trong Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Nó được sử dụng như thế này:
#rgba ( nền: rgba(98, 135, 167, .4); )
Trong trường hợp này, tham số cuối cùng cho biết mức độ mờ.

hàm HSLA

Tương tự như chức năng trước, CSS3 cũng cho phép bạn đặt màu bán trong suốt bằng chức năng HSLA, các tham số của nó là kênh Hue, Saturation, Lightness và Alpha.
#hsla ( nền: hsla(207, 38%, 47%, .4); )

Một điểm quan trọng khi sử dụng hàm rgba và hsla là cài đặt độ trong suốt không được áp dụng cho các phần tử con, trong khi việc sử dụng thuộc tính opacity được kế thừa.

Bạn có muốn tìm hiểu cách tạo các trang có thiết kế hiện đại và nguyên bản không? Việc sử dụng các phần tử trong suốt có thể giúp bạn giải quyết vấn đề khó khăn này. Hôm nay chúng ta sẽ xem xét các cách thực tế chính để thiết lập độ trong suốt của các thành phần cấu trúc.

Làm cách nào để thiết lập độ trong suốt?

Nếu chúng ta xem xét chủ đề này qua lăng kính phát triển lịch sử của công nghệ web, chúng ta có thể phân biệt các cách tiếp cận sau:

Tài sản độ mờ đục.

Cách sử dụng PNG-Những bức ảnh

Định dạng hệ thống RGBA

Vâng, và cuối cùng, hình ảnh cổ xưa hoặc ca rô.

Thuộc tính độ mờ CSS

Áp dụng phong cách CSS của cải độ mờ đục cho phép bạn đặt độ trong suốt của phần tử được áp dụng. Các giá trị có thể được sử dụng làm đối số nằm trong khoảng từ 0 đến 1.
Hãy xem một ví dụ.

< html> < head> < title>TODO cung cấp chức danh < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " >Sẽ có rất nhiều văn bản của bạn ở đây

/* Nền cho nội dung trang */) . trong suốt ( đệm: 10px; /*Thụt lề cho văn bản*/ nền: màu ngọc lam tối; /*Đặt màu nền*/ lề: 0 tự động; /* Căn giữa khối */ chiều rộng: 50%; /*Thiết lập độ rộng của khối */độ mờ: 0,7; /* Đặt độ trong suốt */ phông chữ: 48px/ 64px Times New Roman; văn bản- căn chỉnh: căn chỉnh; )

Kết quả là chúng ta có một khối mờ:

Quan trọng!!!

Độ mờ lấy các giá trị trong phạm vi: 0 (độ trong suốt hoàn toàn) – 1 (độ mờ).

Khả năng tương thích đa trình duyệt. TRONG I E. bao gồm lên đến phiên bản bảy Độ mờ không được hỗ trợ. Dòng sau sẽ giúp đạt được hiển thị tương tự của phần tử:
bộ lọc: alpha(Opacity= 70 );

Điều đáng lưu ý là tài sản lọc mất tích từ html thông số kỹ thuật, thay đổi giá trị từ 1 đến 100 và chỉ có thể áp dụng cho các phần tử:

với vị trí tuyệt đối ( vị trí: tuyệt đối)

với kích thước tuyến tính cố định ( chiều cao hoặc chiều rộng).

Mức độ trong suốt được kế thừa bởi các phần tử con và phần tử con có thể tăng độ trong suốt nhưng không thể làm giảm độ trong suốt. Nghĩa là, bạn không thể tạo văn bản KHÔNG TRONG SUỐT trên nền mờ.

Để hiểu rõ hơn về tài liệu trong đoạn cuối, trong ví dụ trước, chúng ta sẽ đặt màu văn bản thành màu trắng

màu trắng;

và nhìn nó dưới kính hiển vi:

Như bạn có thể thấy, nội dung khối (văn bản) của chúng ta cũng đã trở nên mờ. Nhưng trên thực tế, điều gì sẽ xảy ra nếu bạn không quan tâm đến tính minh bạch của nội dung mà chỉ quan tâm đến tính minh bạch của nền? Trong trường hợp này, hãy chuyển sang điểm tiếp theo.

Sử dụng hình ảnh PNG

Một tính năng thú vị của định dạng PNG là nó có 256 cấp độ trong suốt. Tôi nghĩ bạn đã nắm bắt được dòng suy nghĩ và có thể bạn đã xây dựng được thuật toán về cách thức hoạt động của phương pháp này. Tất cả những gì tôi có thể làm là lên tiếng.

Kết quả là chúng ta có một khối có nền trong suốt và nội dung mờ đục:

Quan trọng!!!

Khác với tài sản độ mờ đụcđộ trong suốt chỉ được đặt cho nền

Khả năng tương thích đa trình duyệt. Hoạt động trên hầu hết các trình duyệt, đây là một điểm cộng. Nhưng minh bạch PNG không được hỗ trợ trong IE6. Nếu bạn tối ưu hóa trang web của mình theo phong cách cổ xưa như vậy, bạn sẽ phải sử dụng các phương pháp hoặc tập lệnh khác.

Khi bạn tắt hiển thị hình ảnh, nền của bạn sẽ biến mất (hãy lưu ý điểm này khi tối ưu hóa hiển thị trên thiết bị di động, vì không phải lúc nào cũng có sẵn Internet không giới hạn).

Để thay đổi màu sắc và/hoặc mức độ trong suốt, bạn cần tạo một hình ảnh mới và tải nó lên máy chủ.

Định dạng hệ thống RGBA

Một trong những phương pháp hiện đại nhất để thay đổi độ trong suốt của nền là sử dụng hệ thống RGBA.

RGBA– hệ thống thể hiện màu sắc sử dụng ba kênh tiêu chuẩn RGB(đỏ, lục, lam) và thứ tư, được gọi là Alpha-kênh đặc trưng cho mức độ minh bạch.

nền: rgba(r, g, b, a);

Trong ví dụ đã biết, chúng tôi thay thế nội dung trong CSS tập tin vào sau:

body ( nền: url(./ vaden- pro- logo. png) ; /* Hình nền */) . prozrachen ( đệm: 10px; nền: rgba(0 , 206 , 209 , 0.7 ) ; lề: 0 tự động; chiều rộng: 50%; phông chữ: 48px/ 64px Times New Roman; màu: trắng; căn chỉnh văn bản: biện minh; )

Quan trọng!!!

Khác với tài sản độ mờ đụcđộ trong suốt chỉ được đặt thành nền

Khác với phương pháp PNG hình ảnh, để thay đổi màu sắc hoặc mức độ trong suốt chúng ta chỉ cần thay đổi các giá trị rgba.

Khả năng tương thích đa trình duyệt. Hoạt động trong tất cả các trình duyệt hiện đại (từ IE9, Op10, Fx3,Sf3.2).Đối với các trình duyệt cũ hơn, bạn sẽ phải hy sinh tính minh bạch hoặc sử dụng độ mờ đục, png phương pháp.

Hình ảnh ca rô, hoặc liên quan đến lịch sử

Phương pháp này là nguồn gốc của thiết kế web và sử dụng các trình duyệt cũ, cũ kỹ mà thực sự không thể làm được gì. Nó bao gồm việc tạo ra một nền ca rô trong đó các ô vuông màu xen kẽ với các ô trong suốt.

Kết quả của việc sử dụng hình ảnh như vậy làm nền là thu được nền giả trong suốt.

Quan trọng!!!

Khi xem văn bản trên nền như vậy, mắt bạn có thể nhanh chóng bị mỏi (các gợn sóng khi cuộn đặc biệt ngột ngạt).

Mặt khác, các tính năng của ứng dụng tương tự như phương pháp “hình ảnh PNG”.

Hãy tóm tắt?

Dưới khối trong suốt cần có hình ảnh tươi sáng, không đơn điệu. Trên nền đơn sắc, điểm nhấn trong suốt sẽ bị mất.

Khi chọn một cách tiếp cận thực tế cụ thể, hãy dựa vào những trình duyệt mà đối tượng mục tiêu của bạn sử dụng. Khả năng tương thích giữa nhiều trình duyệt là quan trọng.