Как можно создать наложение в css?

Я хочу создать div с произвольным размером, а затем отобразить что-то на этот div. Каков наилучший способ позиционирования и размера наложения точно так же, как div ниже в css?

8 55
html css

8 ответов:

можно использовать 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; /* ie fallback png background image */
    z-index:9999;
    color:white;
}

вам просто нужно убедиться, что ваш родитель div имеет position:relative свойство добавлено к нему и ниже z-index.

сделал демо, которое должно работать во всех браузерах, включая IE7+, для комментатора ниже.

демо

удалил элемент opacity свойство из css и вместо этого использовал цвет rGBA, чтобы дать фон, и только фон, уровень непрозрачности. Таким образом, содержимое, которое несет наложение, не будет затронуто. Поскольку IE не поддерживает rGBA, я использовал IE hack вместо этого, чтобы дать ему фоновое изображение PNG с кодировкой base64, которое заполняет наложение div вместо этого, таким образом, мы можем избежать проблемы непрозрачности IEs, где он также применяет непрозрачность к дочерним элементам.

104

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

Я опаздываю на вечеринку, но если вы хотите сделать это с произвольным элементом, используя только CSS, не возясь с позиционированием, наложением divs и т. д., вы можете использовать вставку box shadow:

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

Это будет работать на любом элементе меньше 4000 пикселей в длину или ширину.

пример:http://jsfiddle.net/jTwPc/

8

быстрый ответ, не видя примеров вашего текущего HTML и CSS, чтобы использовать z-index

css:

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

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

где div2-это наложение

0

Я бы предложил использовать атрибуты 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/

0

Если вы не против возиться с 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; }
0

вот наложение с использованием псевдо-элемента (например: не нужно добавлять больше разметки, чтобы сделать это)

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

Я просто играл с аналогичной проблемой на codepen, это то, что я сделал, чтобы создать наложение с помощью простой разметки css. Я создал элемент div с классом .коробка приложила к нему. Внутри этого div я создал два дива, один из которых .внутренний класс применил к нему и другой С.класс notext применяется к нему. Оба этих класса внутри .поле div изначально установлено для отображения: нет, но когда .коробка нависает над ними, они становятся видимыми. 

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

надеюсь, что это помогает! :) Любые предложения приветствуются.

0