Форум на Kuban.ru (http://forums.kuban.ru/)
-   Веб-дизайн и программирование (http://forums.kuban.ru/f1030/)
-   -   Как расположить фотографию фоном поверх всех на экране? (http://forums.kuban.ru/f1030/kak_raspolozhit-_fotografiyu_fonom_poverh_vseh_na_ekrane-5435481.html)

Александрр 24.02.2014 12:04

Как расположить фотографию фоном поверх всех на экране?
 
Нужно фотографию сделать полупрозрачной (прозрачность регулируется) и повесить фоном на экран так, чтобы она при любой смене приложений всегда была вверху, а приложение за ней. Можно ли такое сделать и чем?

Протез 24.02.2014 19:46

position:fixed; bottom:0; right:0

Это если кратко.

Александрр 24.02.2014 21:15

А если полнее? )

Протез 25.02.2014 00:35

2-Александрр >
в общем, надо сделать, чтобы сама страница была 100%х100%, а фотка должна быть в конеце кода.

Протез 25.02.2014 00:35

и не забудьте, что ничего не будет кликаться. ))

Александрр 25.02.2014 11:09

Увы, мои познания в программировании не позволяют это сделать )

Easy3 25.02.2014 16:41

5-Александрр >
для начала забросьте код картинки в самый конец (перед тэгом </body>) и дайте ей стиль "position:fixed; bottom:0; right:0; left:0; top:0;"

За_державу_обидно 13.03.2014 14:26

Я такое сделаю без проблем , но зачем ?

dx0day 23.05.2014 20:36

<div id=photo><img src='photo.jpg'></div>
<style>
div#photo **
position:fixed;
background-size:cover;
width:100%;
height:100%;
**
</style>

sodpd 23.05.2014 22:21

0-Александрр > можно. Только есть одно "но" - по данной схеме работают всплывающие окна, а их много что режет.

Кстати, 4-Протезофф правильно ответил - при этом все ссылки на странице будут заблокированы.

Boltas 23.05.2014 22:39

веб-специалисты здесь однако сильные собрались)

я не силен в html, но если бы нужно было бы решить задачу как в сабже, то сделал бы примерно так
создаем три слоя z-index 1;2;3
1 - приложение (нижний слой)
2 - фотка с opacity
3 - а сюда программно, например с помощью js, элементы управления приложением, допустим те же ссылки

только не понятно - зачем такой огород городить?

sodpd 24.05.2014 00:19

10-Boltas > по условиям задачи - самый верхний слой это картинка. Поэтому как не крути, а ссылки накроются. Потому что если просто делать ссылки - это уже "классическая схема."

Указанная Вами схема возможна, но... Для этого потребуется синхронное управление слоями (1 и 3 прокручиваются, 2 - стоит).

Кстати - весьма распространенное расширение AdBlock быстро уберет верхние слои (т.к. это по сути всплывающие окна) оставив сайт статикой.

fanatnascar 24.05.2014 02:35

[quote=КК СПД;35317862]AdBlock быстро уберет верхние слои (т.к. это по сути всплывающие окна)[/quote]
Какие из дивов окна то?

dx0day 24.05.2014 15:01

[quote=КК СПД;35317862] 10-Boltas &gt; по условиям задачи - самый верхний слой это картинка. Поэтому как не крути, а ссылки накроются. Потому что если просто делать ссылки - это уже "классическая схема." Указанная Вами схема возможна, но... Для этого потребуется синхронное управление слоями (1 и 3 прокручиваются, 2 - стоит). Кстати - весьма распространенное расширение AdBlock быстро уберет верхние слои (т.к. это по сути всплывающие окна) оставив сайт статикой. [/quote]
a:hover img **
z-index:-1;
**

shamanio 25.05.2014 09:26

То, что адблок блокирует <div> расположенный поверх экран - чистейший миф. Если конечно не добавлять к нему класс .banner и ему подобные. Картинку поверх текста наложить можно и при этом также можно эти тексты выделять и кликать по ним. Просто надо уметь верстать, чтобы сделать это без лишних действий.

sodpd 25.05.2014 12:50

14-shamanio > например?

shamanio 25.05.2014 13:55

css свойство pointer-events


Текущее время: 14:54. Часовой пояс GMT +3.