div에 불투명 한 배경 이미지를 저장하는 방법은 무엇입니까?

Question

나는 <p>을 묶어서 <div>을 채우도록 텍스트 뒤에서 불투명 한 배경 이미지를 만들고자하는 <div>을 가지고있다. 나는. 아무리 많은 텍스트를 추가하거나 제거하더라도 이미지는 확대되거나 축소되어 <div>의 전체 배경을 덮어 야합니다.

이미지 만 불투명해야합니다. div 내의 텍스트는 검정색이어야합니다.

어떻게해야합니까? (CSS3를 지원하지 않는 브라우저에 대해 걱정해야합니까?)

Answer 1

[대답] o.p.

나는 뒤로 물러서서 다른 방법으로 문제를보고 크로스 브라우저이며 CSS3이 필요없는 대답을 발견했다.

나는 최대 The Gimp를 발사하고 이미지 자체에 opactiy를 추가했습니다. 멋진 CSS3 필요없이 정확히 무엇을하고자했는지 ;-)

@ JSW189 도움을 주셔서 대단히 감사합니다. 나는 당신이 당신의 대답에 게시하는 것을 꺼리지 않기를 바란다. 그러나 이것은 내가 선택한 해결책이다.

---

당신은 배경 이미지가 전체 사업부를 입력하도록 한 후, background-size:100%을 이미지를 추가 할 background-image 속성을 사용하고 싶습니다.

div { 
    background-image:url('image_url_goes_here.jpg'); 
    background-size: 100%; 
} 

JS Fiddle Example.

불투명도로 전환하려면 opacity 속성을 사용할 수 있습니다. 기본적으로 opacity:1 (불투명)으로 설정되어 있지만, 불투명도를 1에서 0 사이에서 토글하여 변경할 수 있습니다. 예를 들어 50 %의 불투명도가 필요한 경우 opacity:.5을 사용합니다.

Opacity JS Fiddle Example.

background-size은 CSS3 속성입니다. browser compatibility chart here을 볼 수 있습니다. 그러나이 문제는 modernizr과 같은 라이브러리에서 해결할 수 있습니다.