불투명도 : 0은 가시성 : 숨김과 효과가 동일합니다.

불투명도 : 0은 가시성 : 숨김과 효과가 동일합니다.

---

그렇다면 visibility속성을 효과적으로 폐기 합니까?

(Internet Explorer는 아직이 CSS2 속성을 지원하지 않습니다.)
레이아웃 엔진 비교

가시성 : 숨김과 디스플레이 : 없음의 차이점은 무엇입니까?

---

다음은 다양한 답변에서 확인 된 정보를 모은 것입니다.

이러한 각 CSS 속성은 고유합니다. 보이지 않는 요소를 렌더링하는 것 외에도 다음과 같은 추가 효과가 있습니다.

1. 요소가 일반적으로 차지하는 공간을 축소 합니다
2. 이벤트에 응답 합니다 (예 : 클릭, 키 누르기)
3. 탭 순서에 참여

                     축소 이벤트 탭 순서
불투명도 : 0 아니요 예 예
가시성 : 숨겨진 아니요 아니요 아니요
가시성 : 접기 * 아니요 아니요
디스플레이 : 없음 예 아니요 아니요

* 테이블 요소 내부에 예, 그렇지 않으면 아니오

---

아니.

불투명 한 요소는 새로운 스태킹 컨텍스트를 만듭니다.

또한 CSS 사양은 이것을 정의하지 opacity:0않지만를 가진 요소 는 클릭 가능하고를 가진 요소는 클릭 할 visibility:hidden수 없습니다.

---

아니 그렇지 않아. 큰 차이가 있습니다. 가시성이 숨겨 지거나 불투명도가 0 인 경우 요소를 통해 볼 수 있기 때문에 비슷하지만

불투명도 : 0 : 뒤에있는 요소를 클릭 할 수 없습니다 .

가시성 : 숨김 : 뒤에있는 요소를 클릭 할 수 있습니다 .

---

완전히 확실하지는 않지만 이것이 브라우저 간 투명성을 수행하는 방법입니다.

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

가시성 : 숨겨진 개체는 여전히 모양이 있으며 보이지 않습니다. 불투명도 0 요소를 클릭하여 다른 이벤트에 반응 할 수 있습니다.

---

나는 이것을 완전히 확신하지는 않지만 스크린 리더는 가시성 숨김으로 설정된 것을 읽지 않지만 불투명도에 관계없이 읽을 수 있다고 생각합니다.

그것이 내가 생각할 수있는 유일한 차이점입니다.

---

의 요소에 영향을 미치는 사용자 스타일을 만드는 동안 contenteditable무언가를로 설정 visibility: hidden하면 입력 캐럿이 실제로 해당 요소와 상호 작용하고 싶지 않다는 것을 알았 습니다. 예를 들어

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

... 그러면 div / span에 초점을 맞추면 실제로 입력 할 수없는 것 같습니다. 반면 opacity: 0당신은 할 수있는 것 같습니다. 나는 이것을 광범위하게 테스트하지는 않았지만이 페이지의 다른 누구도 텍스트 입력에 미치는 영향에 대해 이야기하지 않았으므로 여기에서 언급 할 가치가 있다고 생각했습니다. 이것은 아마도 위에서 언급 한 사건 과 관련이있는 것 같습니다 .

---

visibility와 사이에는 많은 차이점이 있습니다 opacity. 대부분의 답변은 몇 가지 차이점을 언급하지만 여기에 완전한 목록이 있습니다.

1. 불투명도는 상속되지 않지만 가시성은

2. 가시성은 보이지 않지만 불투명도는 애니메이션 가능합니다.
   ( 기술적 으로는 있지만 "37 % 축소 및 63 % 숨김"에 대해 정의 된 동작이 없으므로이를 애니메이션이 아닌 것으로 간주 할 수 있습니다.)

3. 불투명도를 사용하면 자식 요소를 부모 요소보다 더 불투명하게 만들 수 없습니다. EG color : black 및 opacity : 0.5의 ap가 있으면 그 자식을 완전히 검정색으로 만들 수 없습니다. 불투명도의 유효한 값은 0과 1 사이이며이 예에서는 2가 필요합니다!
   결과적으로 Martin의 의견 에 따르면 보이지 않는 부모 (visibility : hidden)에 가시적 인 자식 (visibility : visible)이있을 수 있습니다. 불투명도에서는 불가능합니다. 부모가 불투명도를 가진 경우 : 0; 그 아이들은 항상 보이지 않습니다.

4. Kornel의 답변에 따르면 1보다 작은 불투명도 값은 자체 스태킹 컨텍스트를 만듭니다. 가시성에 대한 가치가 없습니다.
   (나는 이것을 설명하는 방법을 생각할 수 있기를 원하지만 가시성 : 숨겨진 요소의 누적 컨텍스트를 보여줄 수단을 생각할 수는 없습니다.)

5. According to philnash's answer, elements with opacity:0 are still read by screen readers, while visible:hidden elements are not.

6. According to Chris Noe's answer, visibility has more options (such as collapse) and elements that are not visible no longer respond to clicks and cannot be tabbed to.

(Making this a community wiki, since borrowing from the existing answers wouldn't be fair otherwise.)

---

What Phil says is true.

IE supports opacity though:

filter:alpha(opacity=0);

---

The properties have different semantic meanings. While semantic CSS sounds like it may be silly, as other users have mentioned it has an impact on devices like screen readers -- where semantics impact the accessibility of a page.

참고URL : https://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden