1. visibility는 보일까 안보일까 둘 중 하나 선택입니다. 반면에 opacity는 0부터 1사이의 무한한(소수점도 먹으니까) 값 중 하나를 줄 수 있지요.
동작 측면에서 보자면 visibility를 쓰는 요소는 이벤트가 발생하지 않습니다. 예를들어 a 태그에 opacity:0을 줬을 때는 클릭이 되고, 원래 지정된 동작을 수행합니다.
하지만 visibility: hidden일 때는 클릭이 되지 않습니다.

시각적으로는 visibility: hidden과 opacity: 0은 동일합니다.

실무에서 사용빈도는 글쎄요... 둘 다 많이 사용합니다.
둘 중 뭘 쓰는게 좋을까라고 고민해본적은 없네요.
visibility: hidden을 쓸 상황자체가 많이 발생하지 않아서요.
opacity: 0은 CSS3가 지원되는 브라우저에서 투명도가 변하는 애니메이션이나 트랜지션 효과를 위해 많이 사용하게 됩니다.


2. opacity는 상위에서 주고 하위에서 풀수가 없습니다. 50% 투명도를 가진 요소의 안에 있는 70% 투명도를 가진 요소는 35%의 실제 투명도를 갖게 될겁니다. 0.5 곱하기 0.7 의 결과는 0.35니까요.
하지만 0%안에 있는 요소는 100%이든, 0%이든 모두 동일하게 0%가 됩니다.

그래서 CSS3에서는 rgba 색상값이 새로 추가 되었습니다. 배경색만 투명하게 처리하고 싶을 때 background-color: rgba(0,0,0,0.5); 와 같은식으로 #000 검정색을 50% 투명도로 줄 수 있습니다.
흰색이라면 background-color: rgba(255,255,255,0.5); 가 됩니다. 이 속성은 IE9 이상의 브라우저에서만 지원됩니다.

배경이미지의 경우는 투명도를 조절해서 줄 수 없습니다.
이미지를 투명하게 하는 경우라면 포토샵 자체에서 투명도를 주어서 png로 저장하던지, 별도의 요소(div 등)으로 빼서 겹치게 만들고 opacity로 투명도를 주면 됩니다.