CSS에서 오버레이를 어떻게 만들 수 있습니까?

CSS에서 오버레이를 어떻게 만들 수 있습니까?

---

임의의 크기로 div를 만든 다음 해당 div 위에 무언가를 표시하고 싶습니다. css에서 아래의 div와 정확히 일치하는 오버레이의 위치와 크기를 지정하는 가장 좋은 방법은 무엇입니까?

---

을 사용 position:absolute하여 div 내부에 오버레이를 배치 한 다음 다음과 같이 모든 방향으로 늘릴 수 있습니다.

CSS ^{업데이트 *}

.overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0, 0, 0, 0.85);
    background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */
    z-index:9999;
    color:white;
}

부모 div에 position:relative속성이 추가되고 더 낮은 div가 있는지 확인하기 만하면 z-index됩니다.

---

아래 댓글 작성자를 위해 IE7 +를 포함한 모든 브라우저에서 작동하는 데모를 만들었습니다.

데모

opacityCSS 에서 속성을 제거 하고 대신 rGBA 색상을 사용하여 배경과 배경에만 불투명도 수준을 제공했습니다. 이렇게하면 오버레이가 전달하는 콘텐츠가 영향을받지 않습니다. IE는 rGBA를 지원하지 않기 때문에 대신 IE 해킹을 사용하여 오버레이 div를 채우는 base64 인코딩 PNG 배경 이미지를 대신 제공했습니다. 이렇게하면 불투명도를 자식 요소에도 적용하는 IE의 불투명도 문제를 피할 수 있습니다.

---

http://jsfiddle.net/55LNG/1/

CSS :

#box{
    border:1px solid black;
    position:relative;
}
#overlay{
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    background-color:rgba(255,255,0,0.5);
}

---

파티에 늦었지만 위치 지정, 오버레이 div 등을 엉망으로 만들지 않고 CSS 만 사용하여 임의의 요소에이 작업을 수행하려면 삽입 상자 그림자를 사용할 수 있습니다.

box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5);

이것은 길이 또는 너비가 4000 픽셀보다 작은 모든 요소에서 작동합니다.

예 : http://jsfiddle.net/jTwPc/

---

현재 HTML 및 CSS의 예를 보지 않고 빠른 대답은 Z- 색인을 사용하는 것입니다.

css :

#div1 {
position: relative;
z-index: 1;
}

#div2 {
position: relative;
z-index: 2;
}

div2가 오버레이 인 경우

---

이를 위해 CSS 속성을 사용하는 것이 좋습니다. position : absolute를 사용하여 요소를 다른 요소 위에 배치 할 수 있습니다.

예를 들면 :

<div id="container">
   <div id="on-top">Top!</div>
   <div id="on-bottom">Bottom!</div>
</div>

및 CSS

#container {position:relative;}
#on-top {position:absolute; z-index:5;}
#on-bottom {position:absolute; z-index:4;}

조언을 위해 이것을 살펴볼 것입니다 : http://www.w3schools.com/cssref/pr_class_position.asp

그리고 마지막으로 여기에 제 예를 보여주는 jsfiddle이 있습니다.

http://jsfiddle.net/Wgfw6/

---

Z- 색인을 엉망으로 만들고 싶지만 오버레이를 위해 div를 추가하지 않으려면 다음 접근 방식을 사용할 수 있습니다.

/* make sure ::before is positioned relative to .foo */
.foo { position: relative; }

/* overlay */
.foo::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 0;
}
/* make sure all elements inside .foo placed above overlay element */
.foo > * { z-index: 1; }

---

다음은 유사 요소를 사용하는 오버레이입니다 (예 : 추가 마크 업을 추가 할 필요 없음).

.box {
  background: 0 0 url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
  width: 300px;
  height: 200px;
}

.box:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

  <div class="box"></div>

---

I was just playing around with a similar problem on codepen, this is what I did to create an overlay using a simple css markup. I created a div element with class .box applied to it. Inside this div I created two divs, one with .inner class applied to it and the other with .notext class applied to it. Both of these classes inside the .box div are initially set to display:none but when the .box is hovered over, these are made visible.

.box{
  height:450px;
  width:450px;
  border:1px solid black;
  margin-top:50px;
  display:inline-block;
  margin-left:50px;
  transition: width 2s, height 2s;
  position:relative;
  text-align: center;
    background:url('https://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG');
  background-size:cover;
  background-position:center;
  
}
.box:hover{
  width:490px;
  height:490px;
}
.inner{
  border:1px solid red;
  position:relative;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  display:none; 
  color:white;
  font-size:xx-large;
  z-index:10;
}
.box:hover > .inner{
  display:inline-block;
}
.notext{
  height:30px;
  width:30px;
  border:1px solid blue;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  display:none;
}
.box:hover > .notext{
  background-color:black;
  opacity:0.5;
  display:inline-block;
}

<div class="box">
  <div class="inner">
    <p>Panda!</p>
  </div>
  <div class="notext"></div>
</div>

Hope this helps! :) Any suggestions are welcome.

참고URL : https://stackoverflow.com/questions/9724035/how-can-one-create-an-overlay-in-css