Opacity: 0 có ảnh hưởng chính xác như khả năng hiển thị: hidden

Nếu vậy, nó có phản đối thuộc visibilitytính một cách hiệu quả không ?

(Tôi nhận thấy rằng Internet Explorer chưa hỗ trợ thuộc tính CSS2 này.)
So sánh các công cụ bố cục

Xem thêm: Sự khác biệt giữa khả năng hiển thị: ẩn và hiển thị: không có

Đây là tổng hợp thông tin đã được xác minh từ các câu trả lời khác nhau.

Mỗi thuộc tính CSS này là duy nhất. Ngoài việc hiển thị một phần tử không hiển thị, chúng có (các) hiệu ứng bổ sung sau:

1. Thu gọn không gian mà phần tử thường chiếm
2. Phản hồi các sự kiện (ví dụ: nhấp chuột, nhấn phím)
3. Tham gia vào máy xếp bảng

                     thu gọn trình tự sự kiện
độ mờ: 0 Không Có Có
khả năng hiển thị: ẩn Không Không Không
khả năng hiển thị: thu gọn Có * Không Không
hiển thị: không Có Không Không

* Có bên trong một phần tử bảng, nếu không thì Không.

Không.

Các phần tử có độ mờ tạo ra bối cảnh xếp chồng mới.

Ngoài ra, thông số CSS không xác định điều này, nhưng các phần tử có opacity:0có thể nhấp được và các phần tử có visibility:hiddenthì không.

Không nó không. Có một sự khác biệt lớn. Chúng tương tự nhau vì bạn có thể nhìn xuyên qua phần tử nếu khả năng hiển thị bị ẩn hoặc độ mờ bằng 0, tuy nhiên

opacity: 0 : bạn không thể nhấp vào các phần tử đằng sau nó.

khả năng hiển thị: ẩn : bạn có thể nhấp vào các yếu tố đằng sau nó.

Có nhiều sự khác biệt giữa visibilityvà opacity. Hầu hết các câu trả lời đề cập đến một số khác biệt, nhưng đây là một danh sách đầy đủ.

1. opacity không kế thừa, trong khi khả năng hiển thị

2. độ mờ là hoạt ảnh trong khi khả năng hiển thị thì không.
   (Về mặt kỹ thuật thì đúng là như vậy, nhưng đơn giản là không có hành vi nào được định nghĩa, chẳng hạn như "37% bị thu gọn và 63% bị ẩn", vì vậy bạn có thể coi đây là hành vi không thể hoạt hình.)

3. Sử dụng opacity, bạn không thể làm cho phần tử con mờ hơn phần tử gốc của nó. EG nếu bạn có ap với màu: đen và độ mờ: 0,5, bạn không thể làm cho bất kỳ con nào của nó có màu đen hoàn toàn. Các giá trị hợp lệ cho độ mờ là từ 0 đến 1 và ví dụ này sẽ yêu cầu 2!
   Do đó, theo nhận xét của Martin , bạn có thể có một đứa trẻ có thể nhìn thấy (với khả năng hiển thị: có thể nhìn thấy) trong một phụ huynh không nhìn thấy (với khả năng hiển thị: bị ẩn). Điều này là không thể với độ mờ; nếu cha mẹ có opacity: 0; những đứa con của nó luôn vô hình.

4. Câu trả lời của Kornel đề cập rằng các giá trị độ mờ nhỏ hơn 1 tạo ra bối cảnh xếp chồng của riêng chúng; không có giá trị cho khả năng hiển thị.
   (Tôi ước mình có thể nghĩ ra cách để chứng minh điều này, nhưng tôi không thể nghĩ ra bất kỳ cách nào để hiển thị bối cảnh xếp chồng của một khả năng hiển thị: phần tử ẩn.)

5. Theo câu trả lời của philnash , các phần tử có opacity: 0 vẫn được đọc bởi trình đọc màn hình, trong khi hiển thị: các phần tử ẩn thì không.

6. Theo câu trả lời của Chris Noe , khả năng hiển thị có nhiều tùy chọn hơn (chẳng hạn như thu gọn) và các yếu tố không hiển thị không còn phản hồi với các nhấp chuột và không thể được gắn thẻ.

(Làm cho trang này trở thành wiki cộng đồng, vì nếu không mượn từ các câu trả lời hiện có sẽ không công bằng.)

Tôi không hoàn toàn chắc chắn về điều này, nhưng tôi nghĩ rằng trình đọc màn hình không đọc những thứ được đặt ở chế độ hiển thị ẩn, nhưng chúng có thể đọc mọi thứ bất kể độ mờ của chúng.

Đó là sự khác biệt duy nhất tôi có thể nghĩ ra.

Tôi không chắc chắn hoàn toàn, nhưng đây là cách tôi làm minh bạch trên nhiều trình duyệt:

opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);

đối tượng có khả năng hiển thị: ẩn vẫn có hình dạng, chúng chỉ là không thể nhìn thấy. Các phần tử bằng không độ mờ vẫn có thể được nhấp và phản ứng với các sự kiện khác.

Trong khi tạo kiểu người dùng ảnh hưởng đến các phần tử trong a contenteditable, tôi nhận thấy rằng nếu bạn đặt một cái gì đó thành visibility: hidden, thì dấu mũ đầu vào không thực sự muốn tương tác với nó. Vd: nếu bạn có

<div contenteditable><span style='visibility: hidden;'></span></div>

... thì có vẻ như nếu bạn tập trung vào div / span đó, bạn không thể thực sự gõ vào nó. Trong khi với opacity: 0nó có vẻ như bạn có thể. Tôi chưa thử nghiệm điều này một cách rộng rãi, nhưng tôi thấy rằng điều đáng nói là ở đây vì không ai khác trên trang này đã nói về tác động của việc nhập văn bản. Điều này dường như có thể liên quan đến các sự kiện được đề cập ở trên.

Những gì Phil nói là đúng.

IE hỗ trợ độ mờ mặc dù:

filter:alpha(opacity=0);

Các thuộc tính có ý nghĩa ngữ nghĩa khác nhau . Mặc dù CSS ngữ nghĩa nghe có vẻ ngớ ngẩn, như những người dùng khác đã đề cập, nó có tác động đến các thiết bị như trình đọc màn hình - nơi ngữ nghĩa ảnh hưởng đến khả năng truy cập của một trang.