Установите div в точное положение относительно фона (с размером: крышка)

У меня есть веб-страница с фоном-изображением с размер фона: обложка. Теперь я хочу оверлей это фоновое изображение с определенным div's, которые содержат дополнительную информацию. Эти div's должны находиться в точном положении относительно фонового изображения, даже если я изменяю размер окна браузера.Установите div в точное положение относительно фона (с размером: крышка)

Это только одна попытка, которая не сработала.

HTML

<body> 
<div class="icon"> 
<div class="background picture_rendering"></div> 
</body>

CSS

.background { 
    width:100%; 
    height:100%; 
    background-image: url(images/bg.jpg); 
    background-size: cover; 
    z-index: 0; 
    position: absolute; 
} 

.icon { 
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
    position: relative; 
    background-image: url('/images/icon.jpg'); 
    background-size: 5% auto; 
    background-position: 227px center; 
    background-attachment: fixed; 
}

Это должно быть что-то вроде карты тэгом: http://www.w3schools.com/tags/tag_map.asp Но вместо ссылок должны быть иконки. Я надеюсь, вы понимаете :-)

С наилучшими пожеланиями, Один

источник

2014-10-24 The One

В принципе вы можете создать родительский или обертку элемент, который будет иметь фоновое изображение, а затем поместить все элементы, такие как иконки и т.д. внутри этого и сделать все ваше позиционирование и т.д. Таким образом, я создал это для вас:

CSS

.container { 
    background: url(http://www.w3schools.com/tags/planets.gif) no-repeat; 
    width: 145px; 
    height: 126px; 
    position: relative; 
} 

.icon { 
    position: absolute; 
    width: 30px; 
    height: 30px; 
    border-radius: 100%; 
    z-index: 2; 
} 

.icon1 { 
    background: green; 
    top: 20%; 
    right: 10%; 
} 

.icon2 { 
    background: red; 
    bottom: 10%; 
    left: 10%; 
}

HTML

<div class="container"> 
    <div class="icon icon1"></div> 
    <div class="icon icon2"></div> 
</div>

Вот пример на jsFiddle http://jsfiddle.net/j5cgt22z/

Таким образом, каждый значок, расположенный внутри контейнера, планеты должны использовать position:absolute, чтобы они плавали вокруг в контейнере пространстве, но контейнер должен иметь position:relative так они расположены по отношению к их родителям. http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Затем вы можете использовать z-индекс для каждой позиции: абсолютный значок для складывания каждого значка, тем выше индекс z выше стека.

Надеется, что это помогает

источник

2014-10-24 12:18:23 styler

Совершенная +1 - бить меня к нему. - http://codepen.io/Paulie-D/pen/dgcha –

Все это хорошие решения, но поведение изображения в фоновом режиме не похоже на 'cover', больше похоже на' contains'. –

Поняв, что не существует никакого общее решения для этой проблемы пока нет. (объектная подгонка не поддерживается широко). Я использовал jquery-Plugin imagefill.js.

CSS

.background { 
    width:100%; 
    height:100%; 
    top: 0; 
    left: 0; 
    background-image: url(http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg); 
    background-size: cover; 
    z-index: 0; 
    position: absolute; 
    background-position: center center; 
} 

.container_icons 
{ 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

.test 
{ 
    position: absolute; 
    background-image: url('http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png'); 
    background-size: 70px auto; 
    background-repeat: no-repeat; 
    background-position: 17% 49%; 
}

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/2.1.0/jquery.imagesloaded.min.js"></script> 
    <script src="http://johnpolacek.github.io/imagefill.js/js/jquery-imagefill.js"></script> 

    <div class="background"></div> 
    <div class="container_icons"><img class="test" src="http://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png" width="3869px" height="2574px" /></div> 
    <script> 
     $('.container_icons').imagefill(); 
</script>

Вот jsfiddle -> Это не будет работать так же хорошо, как на моей странице ;-)

источник

2014-11-03 14:55:18

Установите div в точное положение относительно фона (с размером: крышка)

ответ

Смежные вопросы