51
Я хотел бы создать div с произвольным размером, а затем отобразить что-то поверх этого div. Каков наилучший способ размещения и размера наложения точно так же, как div ниже в css?Как создать оверлей в css?
A
ответ
97
Вы можете использовать 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, добавленное к нему, и нижнее z-index.
Сделано демо, которое должно работать во всех браузерах, включая IE7 +, для комментатора ниже.
Удален opacity свойства из CSS, а вместо этого использовал цвет RGBA, чтобы дать фон, и только фон, уровень непрозрачности. Таким образом, контент, на который распространяется наложение, не будет затронут. Поскольку IE не поддерживает rGBA, я использовал IE hack вместо этого, чтобы дать ему базовое изображение с PNG, закодированное в base64, которое заполняет наложенный div вместо этого, таким образом мы можем обойти проблему непрозрачности IE, когда она применит непрозрачность к элементам children.
0
Быстрого ответ, не видя примеры текущего HTML и CSS является использование Z-индексу
CSS:
#div1 {
position: relative;
z-index: 1;
}
#div2 {
position: relative;
z-index: 2;
}
Где div2 является наложением
+0
Вы также можете использовать положение: абсолютное; в зависимости от того, как расположен ваш родительский div. –
0
Я предлагаю использовать CSS атрибуты сделай это. Вы можете использовать положение: абсолютное, чтобы расположить элемент поверх другого.
Например:
<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, чтобы показать вам мой пример
8
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, без возни с позиционированием, наложение дивы и т.д. ., вы можете использовать тени врезке коробки:
box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5);
Это будет работать на любом элементе меньше, чем 4000 пикселей по ширине или длине.
пример: http://jsfiddle.net/jTwPc/
0
Если вы не возражаете, баловаться с г-индекса, но вы хотите, чтобы избежать добавления дополнительных 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
Я просто играл с подобной проблемой в кодефене, это то, что я сделал для создания наложения, используя простую разметку css. Я создал элемент div с приложением класса .box. Внутри этого div я создал два divs, один с классом .inner, применяемый к нему, а другой с классом .notext, примененным к нему. Оба из этих классов внутри div .box первоначально устанавливаются для отображения: none, но когда .box завис, они становятся видимыми.
.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>Надеется, что это помогает! :) Любые предложения приветствуются.
Я не знал положения: относительное отношение ко всем детям: O. Большое спасибо –
Не могли бы вы сделать его более кросс-браузерным? – Greg
@Greg Поскольку поддержка непрозрачности IE очень скудная, и она просачивается в дочерние узлы div, вы не можете получить чистую непрозрачность в div, но вы можете обойти это, используя вместо этого png-изображение с некоторой непрозрачностью, вот демо, которое должно работать во всех браузерах (включая IE7 +): http://jsfiddle.net/andresilich/g5jEr/ –