기본 CSS- 상단에 반투명 DIV가있는 DIV를 기계하는 방법

기본 CSS- 상단에 반투명 DIV가있는 DIV를 기계하는 방법

---

이 언어를 내 브라우저 (Chrome)에서 바로 만들기 위해 고군분투하고 있습니다. HTML의 모든 요소를 ​​포함하는 래퍼가 있고 이미지를 포함하는 DIV (div-1이라고 부름)를 갖고 싶습니다. 여기에서 스케치 한 것처럼 그 위에 장비 div가 있습니다. 사진 ... 빠른 해결책이 있습니까?

---

다음은 DarkBee의 답변과 해결해야 할 추가 .wrapperdiv 가 필요없는 순수한 CSS 솔루션입니다 .

.dimmed {
  position: relative;
}

.dimmed:after {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

여기에서는 rgba를 사용하고 원하는 경우 다른 투명성 방법을 사용할 수 있습니다.

---

CSS3를 사용하면 투명도로 자신만의 이미지를 만들 필요가 없습니다.

다음과 같은 div가 있습니다.

position:absolute;
left:0;
background: rgba(255,255,255,.5);

배경 (.5)의 마지막 매개 변수는 투명도 수준입니다 (높을수록 불투명 함).

예제 바이올린

---

.foo {
   position : relative;
}
.foo .wrapper {
    background-image : url('semi-trans.png');
    z-index : 10;
    position : absolute;
    top : 0;
    left : 0;
}

<div class="foo">
   <img src="example.png" />
   <div class="wrapper">&nbsp;</div>
</div>

---

div-Element의 경우 클래스를 통해 불투명도를 설정하여 효과를 활성화하거나 할 수 있습니다.

.mute-all {
   opacity: 0.4;
}

---

이전 답변과 쌓기 쌓기 목적으로 :: before를 넣었습니다. 기계 위에 텍스트를 포함하려는 경우 (일반적인 사용 사례) :: before를 사용하면 문제가 해결됩니다.

.dimmed {
  position: relative;
}

.dimmed:before {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

참고 URL : https://stackoverflow.com/questions/17859993/basic-css-how-to-overlay-a-div-with-semi-transparent-div-on-top