Перейти к содержимому


Как Сделать Прозрачность (Как-Будто На Стекле)


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 34

#21 odissei

odissei

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 382 сообщений
  • ГородАм. Область

Отправлено 25 Декабрь 2012 - 10:22

miyako, за решение проблем отображения в IE отдельное спасибо.

Все получилось.

#22 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 25 Декабрь 2012 - 11:06

Для закругления концов в ie9 можно добавить следующую строку:
behavior: url({ASSETS_STYLES_PATH}ie-css3.htc); /* заплатка IE */
в код:
<!--[if lt IE 9]>
<style type="text/css">
#container {
	 background-color: #F7FBFF; /*подберите нужный вам цвет*/
	 filter: alpha(Opacity=70); /* Прозрачность в IE */
}
</style>
<![endif]-->
А также скачайте файл ie-css3.htc по адресу: http://www.ziddu.com...e-css3.rar.html и добавьте его на ваш сайт: Сайт-> Редактор тем->Файлы

#23 Диана

Диана

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 128 сообщений
  • ГородМосква

Отправлено 23 Февраль 2013 - 14:47

Просмотр сообщенияVaccina (22 Декабрь 2012 - 04:49) писал:

Вам необходимо в файле стилей main.css раздела редактора тем - найти

#container {
margin: 0 auto;
max-width: 1000px;
width: 1000px;
}

и заменить на

#container {
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
margin: 0 auto;
max-width: 1000px;
width: 1000px;
}

далее вам понадобиться задать общий фон. Это вы можете сделать в классе

#backtop {
background: url("/web/upload/assets/images/145/144230/bgout.jpg") repeat scroll center bottom transparent;
}

вам необходимо или изменить изображение "bgout.jpg" в разделе редактора тем, или же прописать в данном классе другое изображение.

Возможно вам так же понадобиться убрать белый фон у общего контента. Это может сделать в классе

#cntrobj {
background: url("/web/upload/assets/images/145/144230/conteiner-bg-y.jpg") repeat-y scroll 0 0 transparent;
}

просто заменив его на

#cntrobj {
background: transparent;
}

Здравствуйте! Правильно ли я понимаю,  если здесь - #cntrobj {
background: url("/web/upload/assets/images/145/144230/conteiner-bg-y.jpg") repeat-y scroll 0 0 transparent; - заменить conteiner-bg.jpg - на любую цветную картинку в формате jpg, то  уменя получится не белый фон под текстом, а прямо цветная картинка? Я попробовала так сделать, но у   меня ничего не выходит, хотела поставить розовый фон, а все равно остается белый... Что я  делаю не так?

Прикрепленные изображения

  • conteiner-bg.jpg


#24 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 23 Февраль 2013 - 15:41

Просмотр сообщенияДиана (23 Февраль 2013 - 14:47) писал:

Здравствуйте! Правильно ли я понимаю,  если здесь - #cntrobj {
background: url("/web/upload/assets/images/145/144230/conteiner-bg-y.jpg") repeat-y scroll 0 0 transparent; - заменить conteiner-bg.jpg - на любую цветную картинку в формате jpg, то  уменя получится не белый фон под текстом, а прямо цветная картинка? Я попробовала так сделать, но у   меня ничего не выходит, хотела поставить розовый фон, а все равно остается белый... Что я  делаю не так?

Вам нужно загрузить на сайт изображение с именем conteiner-bg-y.jpg
теперь блок
#cntrobj {
background: url(http://design.danashop.ru/conteiner-bg-y.jpg) repeat-y;
}
измените на
#cntrobj {
background: url(http://design.danashop.ru/conteiner-bg-y.jpg) repeat;
}


#25 Диана

Диана

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 128 сообщений
  • ГородМосква

Отправлено 23 Февраль 2013 - 16:11

Просмотр сообщенияsupport 2.0 (23 Февраль 2013 - 15:41) писал:

Вам нужно загрузить на сайт изображение с именем conteiner-bg-y.jpg
теперь блок
#cntrobj {
background: url(http://design.danashop.ru/conteiner-bg-y.jpg) repeat-y;
}
измените на
#cntrobj {
background: url(http://design.danashop.ru/conteiner-bg-y.jpg) repeat;
}

Получилось, СПАСИБО ВАМ! Вот только как бы еще убрать  или лучше закрасить в  тот же цвет верхнюю вертикальную полоску и нижнюю в теле?

#26 Диана

Диана

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 128 сообщений
  • ГородМосква

Отправлено 23 Февраль 2013 - 16:22

Просмотр сообщенияДиана (23 Февраль 2013 - 16:11) писал:

Получилось, СПАСИБО ВАМ! Вот только как бы еще убрать  или лучше закрасить в  тот же цвет верхнюю вертикальную полоску и нижнюю в теле?

Вопрос снимаю, огромнейший респект Вам за помощь! :) :wub:

#27 Alan

Alan

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 246 сообщений

Отправлено 12 Август 2013 - 17:03

А на шаблон Mokko как это сделать?

#28 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 12 Август 2013 - 18:24

Просмотр сообщенияAlan (12 Август 2013 - 17:03) писал:

А на шаблон Mokko как это сделать?

Опишите, пожалуйста, поподробнее что Вы хотите сделать и напишите номер Вашего аккаунта

#29 Alan

Alan

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 246 сообщений

Отправлено 12 Август 2013 - 22:51

Просмотр сообщенияodissei (22 Декабрь 2012 - 02:29) писал:

Примерно как здесь:
http://инфэшн.рф/

Полностью окантовка всей станицы. И по краям этой таблицы (окантовки, обрамления как назвать) виден даже эффект преломления.
Вижу что она целостная и больше стандартной, через что сделать подобное? На каком нить примере покажите плз.

P.S. Дизайн копировать не собираюсь, плюс направление у меня совсем другое.


Вот также хотел бы.. На второй план оставить фон, как стекло..
borse.storeland.ru

#30 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 13 Август 2013 - 01:55

Не совсем понятен ваш вопрос, по причине того что адрес который вы указываете в качестве примера - не доступен. Пожалуйста, опишите что вы хотите реализовать, опишите ваш вопрос как можно подробнее.

#31 Alan

Alan

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 246 сообщений

Отправлено 13 Август 2013 - 18:39

http://bel-mag.ru/

вот видете как здесь?) я также хочу сделать себе окантовку..  
.. http://borse.storeland.ru/ вот мой аккаунт

все, разобрался)

#32 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 14 Август 2013 - 16:38

Просмотр сообщенияAlan (13 Август 2013 - 18:39) писал:

http://bel-mag.ru/

вот видете как здесь?) я также хочу сделать себе окантовку..  
.. http://borse.storeland.ru/ вот мой аккаунт

все, разобрался)

На Вашем сайте не увидела подобных изменений, поэтому вот инструкция:
найдите в файле main.css строчку
#content {width: 960px;margin: 0 auto;}
замените на
#content {width: 960px;margin: 0 auto;background-color: rgba(255, 255, 255, 0.3);box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);}


#33 Alan

Alan

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 246 сообщений

Отправлено 18 Август 2013 - 15:10

спасибо большое)

#34 Sgray

Sgray

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 456 сообщений

Отправлено 04 Сентябрь 2014 - 09:04

Просмотр сообщенияmiyako (25 Декабрь 2012 - 10:17) писал:

Для решения проблемы в Ie в Редакторе тем в шаблоне HTML перед строкой вставьте следующий код:  
<!--[if lt IE 9]>
<style type="text/css">
#container {
background-color: #F7FBFF; /*подберите нужный вам цвет*/
filter: alpha(Opacity=70); /* Прозрачность в IE */
}
</style>
<![endif]-->
Не указано перед какой строкой вставить код.
В коде указано IE 9 - а как указать для всех версий IE.

#35 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 04 Сентябрь 2014 - 09:28

Просмотр сообщенияSgray (04 Сентябрь 2014 - 09:04) писал:

Не указано перед какой строкой вставить код.
В коде указано IE 9 - а как указать для всех версий IE.

Продублировать данный код, заменив цифру версии на нужную. Вставить перед </head>




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных