Создание границы вокруг моего изображения, которое заполняет страницу

0 
.overlay{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:url(hex-shape.png) no-repeat center;
  z-index:99999;
}

Мое фоновое изображение является наложением для всей страницы. Я хотел бы заполнить остальную часть страницы белым, окружающим изображение наложения, но не внутри него.

Я использую его для создания изображения в середине экрана.

Идея заключается в том, что страница может быть полноцветной за фоновым изображением и по-прежнему быть невидимой из-за границы или того, что попадает на изображение.

Теги:

3 ответа

0
Лучший ответ
.overlay{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background: #{your_color} url(hex-shape.png) no-repeat center;
  z-index:99999;
}
Поделиться
  • 0
    Это хорошо ... но если в конечном итоге заливка цвета внутри изображения PNG, что наносит ущерб цели кадра. PNG имеет высоту 676 пикселей и ширину 600 пикселей.
  • 0
    Хорошо. в этом случае:
Показать ещё 2 комментария
0

не понимаю, что вам нужно, но я думаю, что это поможет

использование вытяжной техники:

.overlay{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:url(hex-shape.png) no-repeat center;
  z-index:99999;
}

играть с верхними, левыми, правыми, нижними значениями

Поделиться
0

Если вы знаете размер изображения, это простой способ центрировать изображение посередине:

HTML:

<div id="container">
    <img id="placekitten" src="http://placekitten.com/g/200/300">
</div>

CSS:

#placekitten {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -150px;
    margin-left: -100px;
    z-index: 9000;
}
#container {
    height: 500px;
    border: solid black 1px;
}

Ключ должен сделать margin-top равным -1 * height/2 а margin-left равным -1 * width/2. Однако вам нужно установить эти значения вручную, чтобы это работало.

FIDDLE

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню