Jak można utworzyć nakładkę w css?

Question

Chciałbym utworzyć element div o dowolnym rozmiarze, a następnie wyświetlić coś na wierzchu elementu div. Jaki jest najlepszy sposób pozycjonowania i rozmiaru nakładki dokładnie jak div poniżej w css?

Answer 1

Można użyć position:absolute do położenia nakładki wewnątrz Twojego div, a następnie rozciągnąć go we wszystkich kierunkach tak:

CSS^{aktualizowane *}

.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; 
} 

Musisz tylko upewnić się, Twój element nadrzędny div ma dodaną właściwość position:relative i niższą z-index.

---

Wykonane demo, które powinno działać we wszystkich przeglądarkach, w tym IE7 +, dla komentującego poniżej.

Demo

Usunięto właściwość z css opacity, a zamiast tego stosuje się kolor rgba otrzymując tle, i jedynie tło, poziom zmętnienia. W ten sposób nie wpłynie to na zawartość nakładki. Ponieważ IE nie obsługuje rGBA, zamiast tego użyłem haka IE, aby nadać mu obraz tła PNG zakodowany w formacie base64, który zamiast tego wypełnia div, w ten sposób możemy uniknąć problemu z przezroczystością IE, w którym stosuje on krycie również do elementów potomnych.

Answer 2

Szybka odpowiedź nie widząc przykłady aktualnej HTML i CSS jest skorzystanie z-index

css:

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

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

Gdzie Div2 jest nakładka

Answer 3

Proponuję za pomocą css atrybuty Zrób to. Możesz użyć position: absolute, aby umieścić element na drugim.

Na przykład:

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

i css

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

chciałbym spojrzeć na to za rada: http://www.w3schools.com/cssref/pr_class_position.asp

I wreszcie o to jsfiddle pokazać moim przykładem

http://jsfiddle.net/Wgfw6/

Answer 4

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); 
} 

Answer 5

jestem późno do partii, ale jeśli chcesz to zrobić na dowolnym elemencie używając tylko CSS, bez aprowizacji z pozycjonowaniem DIV nakładki itp ., możesz użyć cienia wstawionego pudełka:

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

Będzie to działać na każdym elemencie o długości mniejszej niż 4000 pikseli lub szerokości.

przykład: http://jsfiddle.net/jTwPc/

Answer 6

Jeśli nie przeszkadza brudząc z z-index, ale chcesz uniknąć dodając dodatkowy div na nakładce można użyć następujące podejście

/* 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; } 

Answer 7

Oto nakładać za pomocą pseudo-element (np: nie ma potrzeby, aby dodać więcej znaczników, aby to zrobić)

.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>

Answer 8

Po prostu bawiłem się z podobnym problemem na codepen, to jest to, co zrobiłem, aby stworzyć nakładkę za pomocą prostego znacznika css. Stworzyłem element div z klasą .box zastosowaną do niego. Wewnątrz tego div stworzyłem dwa divy, jeden z klasą wewnętrzną zastosowany do niego, a drugi z klasą .notext zastosowaną do niego. Obie te klasy wewnątrz .box div są początkowo ustawione tak, aby wyświetlały: none, ale gdy .box jest zasłaniane, stają się widoczne.

.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>

Nadzieja to pomaga! :) Wszelkie sugestie są mile widziane.