Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Прозрачный слой.

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

SAOD

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Вобщем что хочется:
Чтобы содержимое сайта оказалось за прозрачным серым слоем и при этом было недоступно для выделения, копирования и т.д. На подобии вида за стеклом: видим, но потрогать не можем.
 
Чтото подобное происходит тут при нажатии на поиск.
Подозреваю что это помесь CSS  и JavaScript. Возможно даже одним CSS можно обойтись.  
 
Подскажите про что именно почитать, посмотреть, вобщем соореинтируйте плиз.

Всего записей: 228 | Зарегистр. 30-12-2006 | Отправлено: 20:53 07-03-2008
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
SAOD
выкладываем поверх div и ставим в css "filter: alpha(opacity=80);-moz-opacity: 0.8; opacity: 0.8;"

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 20:55 07-03-2008
SAOD

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Вот что-то у меня получилось.  
Правильно ли я делаю? А еще элементы за прозрачным слоем у меня получились доступными, их можно выделять. Это как поправить?
 

Код:
<html>
<head>
<title>
test alpha layer
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="z-index: 1">
<table width="100%" height="90%">
<tr>
<td width="100%" height="100%" align="center">
    some text<br>
    <font color="blue">some text</font><br>
    <font color="green">some text</font><br>
    <font color="red">some text</font><br>
</td>
</tr>
</table>
</div>
 
<div style="filter: alpha(opacity=30);-moz-opacity: 0.8; opacity: 0.8; width: 100%; height: 100%; z-index: 2; position: absolute; top: 0px; right: 0px; background-color: gray;"></div>
</body>
</html>

 
UPD
 
В firefox как надо работает, в opera текст под слоем выделяем, в konqueror под слоем вообще ничего не видно, в IE цвет слоя почему то белый.  
Видимо я что-то не так делаю.

Всего записей: 228 | Зарегистр. 30-12-2006 | Отправлено: 10:16 08-03-2008 | Исправлено: SAOD, 11:38 08-03-2008
vs62

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
background-color: Transparent; и усё

Всего записей: 529 | Зарегистр. 02-07-2007 | Отправлено: 11:46 08-03-2008
SAOD

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs62
 
Это что-то совсем не то,  transparent прозрачен на 100% , т.е получается что он есть, что нету - эффекта 0.
 
Добавлено:
Понял свою ошибку, указал разную opacity.
Вот подправленный вариант гораздо лучше работает

Код:
 
<html>
<head>
<title>
test alpha layer
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body topmargin='0' leftmargin='0' rightmargin='0' marginwidth='0' marginheight='0'>
 
<table width="100%" height="90%">
<tr>
<td width="100%" height="100%" align="center">
    some text<br>
    <font color="blue">some text</font><br>
    <font color="green">some text</font><br>
    <font color="red">some text</font><br>
</td>
</tr>
</table>
 
<div style="filter: alpha(opacity=70);-moz-opacity: 0.7; opacity: 0.7; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color: black;"></div>
</body>
</html>
 

 
firefox/iceweasel - работает на 100%
opera - c прозрчностью нормально, но элементы за слоем выделяемы, хотелось бы исправить
IE 6 - работает на 100%
Safari fur windows - работает на 100%
Konqueror - прозрачность не работает вовсе, те все черным - черно. Хотелось бы исправить, но вследствии малой популярности можно и забить.
 
Вот насчет opera и konqueror подскажите если знаете =)

Всего записей: 228 | Зарегистр. 30-12-2006 | Отправлено: 12:03 08-03-2008
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
SAOD

Цитата:
Вот насчет opera и konqueror подскажите если знаете =)

выставите нужный z-index для дива, чтобы поверх всего был
 


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 20:25 08-03-2008
SAOD

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery
 
В первом примере у меня стоит z-index, только толку от него ни грамма. Попробовал и в последний пример засунуть z-index: 2; в div, тоже ничего не дало, в опере текст под слоем по прежнему выделяется,  ну а konqueror похоже с прозрачностью вообще не дружит.

Всего записей: 228 | Зарегистр. 30-12-2006 | Отправлено: 21:14 08-03-2008
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
SAOD

Цитата:
ну а konqueror похоже с прозрачностью вообще не дружит.

да
 

Цитата:
в опере текст под слоем по прежнему выделяется

больше индекс..

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 21:24 08-03-2008
SAOD

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
больше индекс..

 
100, 1000, 1000000 .... не  помогает
Видимо не в индексе дело, а в чем?

Всего записей: 228 | Зарегистр. 30-12-2006 | Отправлено: 21:38 08-03-2008
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
SAOD

Цитата:
Видимо не в индексе дело, а в чем?

ну значит опере все равно..  


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 21:44 08-03-2008
Brodyaga



Silver Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
SAOD
Как вариант - в dive прописать <img src='pixel.gif' width=100% height=100%> где pixel.gif это прозрачный GIF 1x1

----------
Damn Metal

Всего записей: 2713 | Зарегистр. 07-01-2006 | Отправлено: 12:08 09-03-2008
STEEL



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А как сделать бэкграунд в виде слоя.. а сверху еще слои с текстом наложить? делаю слои с текстом прозрачные... текст тускнеет. а надо чтобы текст был 100%

Всего записей: 2293 | Зарегистр. 06-01-2002 | Отправлено: 23:03 24-04-2009
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
STEEL
CSS: наследование аттрибута прозрачности
или о чем речь?

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 23:08 24-04-2009 | Исправлено: Cheery, 23:09 24-04-2009
STEEL



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Вот что получается:
   
 
А хочется чтобы текст был черным... а не серым... то есть не делать прозрачным верхний слой.

Всего записей: 2293 | Зарегистр. 06-01-2002 | Отправлено: 23:28 24-04-2009
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
STEEL

Цитата:
а не серым... то есть не делать прозрачным верхний слой.

код где?  


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 23:29 24-04-2009
STEEL



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
_http://www.iru/test/div.html здесь

Всего записей: 2293 | Зарегистр. 06-01-2002 | Отправлено: 14:46 25-04-2009 | Исправлено: STEEL, 00:06 13-05-2009
KBA696



Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
у меня такая же проблема с выделением на опере, но как я понял что это в опере так при использовании див даже не прозрачном задний текст выделяется, а не подскажете как мне сделать див под размер страницы она просто может увеличиваться или уменьшаться потому строго определоные пиксели или проценты не подойдут

Всего записей: 203 | Зарегистр. 05-08-2008 | Отправлено: 11:10 13-09-2009
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Прозрачный слой.


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2025

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru