X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Вопрос по css - Opacity
kelevra
kelevra
Topic Starter сообщение 27.9.2013, 20:48; Ответить: kelevra
Сообщение #1


Участник
***

Группа: User
Сообщений: 187
Регистрация: 29.7.2012
Из: Бишкек
Поблагодарили: 7 раз
Репутация:   -3  


Делаю opacity 0.5 для блока меню, но вместе с фоном блока opacity налагается на Пункты меню, и получается что Надписи тоже полупрозрачные. Как решить проблему? чтобы фон был только полупрозрачным?


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
rjksdfhe
rjksdfhe
сообщение 27.9.2013, 22:04; Ответить: rjksdfhe
Сообщение #2


Straight arms
*******

Группа: Active User
Сообщений: 2760
Регистрация: 21.4.2009
Из: Мытищи, МО, РФ
Поблагодарили: 1111 раз
Репутация:   163  


Наследуется, как и принято в CSS.

Для детей, у которых это не надо (подблоков):
style="opacity:1 !important"


По-уму, только фон надо делать полупрозрачным, остальное не трогать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kelevra
kelevra
Topic Starter сообщение 27.9.2013, 22:21; Ответить: kelevra
Сообщение #3


Участник
***

Группа: User
Сообщений: 187
Регистрация: 29.7.2012
Из: Бишкек
Поблагодарили: 7 раз
Репутация:   -3  


style="opacity:1 !important"

Не помогло.


По-уму, только фон надо делать полупрозрачным, остальное не трогать.

Ну дык я так и сделал, а не сделалось ещё и всё остальное.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
rjksdfhe
rjksdfhe
сообщение 27.9.2013, 22:34; Ответить: rjksdfhe
Сообщение #4


Straight arms
*******

Группа: Active User
Сообщений: 2760
Регистрация: 21.4.2009
Из: Мытищи, МО, РФ
Поблагодарили: 1111 раз
Репутация:   163  


Если доступно через http, скиньте в личку.
В Хроме крутить настройки так проще.

И браузер, через который проверяете, тоже.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lostprophet
lostprophet
сообщение 27.9.2013, 23:16; Ответить: lostprophet
Сообщение #5


Топовый постер
*******

Группа: Super Moderator
Сообщений: 2567
Регистрация: 18.11.2008
Из: Ростов-на-Дону
Поблагодарили: 3172 раза
Репутация:   292  


А еще лучше сюда выложить html + css, так всем понятней будет.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Dikucher
Dikucher
сообщение 28.9.2013, 4:32; Ответить: Dikucher
Сообщение #6


Частый гость
**

Группа: User
Сообщений: 61
Регистрация: 8.2.2013
Из: Киев
Поблагодарили: 5 раз
Репутация:   2  


rjksdfhe, это тоже мне первое пришло в голову, но это не работает. Думаю здесь дело в "контексте" как в случае с z-index, даже уверен в этом.
а ТС-у советую следующее. Если вам надо всего лишь задать прозрачность ФОНА у меню, тогда лучше воспользоваться заданием цвета через rgba канал

.menu {
    background: rgba(0, 0, 0, 0.5)
// сделает полупрозрачный черный фон, степень прозрачность задается через коэфициент альфа канала, в данном случае 0.5
}


если у вас фон через рисунок, то измените его прозрачность через редактор (photoshop например )

Ну дык я так и сделал, а не сделалось ещё и всё остальное.


background такое же свойство как и opacity, и задают параметры для всего блока-меню, вот вы и получаете на выходе, что полупрозраными становятся и пункты меню ( как часть блока-меню)

Сообщение отредактировал Dikucher - 28.9.2013, 4:36
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kelevra
kelevra
Topic Starter сообщение 28.9.2013, 12:16; Ответить: kelevra
Сообщение #7


Участник
***

Группа: User
Сообщений: 187
Регистрация: 29.7.2012
Из: Бишкек
Поблагодарили: 7 раз
Репутация:   -3  


Прикрепленное изображение
<div id="menu">
<h5>Меню</h5>
<ul class="menulist">
<li>Лечение кошек</li>
<li>Лечение собак</li>
<li>Стерилизация кошек</li>
<li>Кастрация котов</li>
<li>Прививки котятам</li>
</ul>
</div>

#menu {
height: 221px;
width: 210px;
background-color: #82c128;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:6px;
-khtml-border-radius:12px;
display: block;
margin-top: 71px;
margin-left: 10px;
float: left;
opacity: 0.5;
}

.menulist{
font-size: 17px;
color: #FFFFFF;
font-weight: bold;
padding-left: 0px;
list-style: none;
margin-left: 17px;
}
.menulist li {
opacity: 1.0;
}


Сообщение отредактировал kelevra - 28.9.2013, 12:17


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WarZEN
WarZEN
сообщение 28.9.2013, 13:10; Ответить: WarZEN
Сообщение #8


Участник
***

Группа: User
Сообщений: 121
Регистрация: 10.3.2013
Поблагодарили: 24 раза
Репутация:   6  


Кудесники елки палки)))


В #menu { ... } убираем background-color: #82c128; и opacity: 0.5;
а добавляем background: rgba(130, 193, 40, 0.52);

В #menu li { ... } убираем opacity: 1.0;
Поскольку оно вовсе и не нужно

Вот и все колдовство))


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
BRONX
BRONX
сообщение 28.9.2013, 13:35; Ответить: BRONX
Сообщение #9


Частый гость
**


Группа: User
Сообщений: 62
Регистрация: 26.8.2013
Поблагодарили: 13 раз
Репутация:   3  


(WarZEN @ 28.9.2013, 11:10) *
background: rgba(130, 193, 40, 0.52);


Верно, RGBA в данном случае гораздо проще использовать альфа канал, чем использовать opacity
что вы и привели в примере

к тому же не все браузеры поддерживают opacity
Internet Explorer 9 и выше соответственно Opera начиная с версии 10
по этому манипуляции с альфа каналом в rgba думаю разумнее будет


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WarZEN
WarZEN
сообщение 28.9.2013, 14:02; Ответить: WarZEN
Сообщение #10


Участник
***

Группа: User
Сообщений: 121
Регистрация: 10.3.2013
Поблагодарили: 24 раза
Репутация:   6  


BRONX, Суть даже не в том, что opacity не столь кросбраузерный - он дает прозрачность не только основному элементу, к которому применяется, но и ко всем дочерним элементам, в отличии от background с применением альфа-канала, который дает прозрачность цвету только фону основного элемента - что и нужно ТС.

Сообщение отредактировал WarZEN - 28.9.2013, 14:07


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Вопрос по seo для интернет магазина
куда девать продвинутые товары, которые уже не выпускают
18 viktormerke 2759 Сегодня, 15:18
автор: Smspva
Открытая тема (нет новых ответов) Проги для редактирования style.css
14 minutkin 1050 11.12.2017, 16:01
автор: Nell
Открытая тема (нет новых ответов) Вопрос к знатокам Instagram
20 SEOMR 4174 30.11.2017, 14:25
автор: DiscordPro
Открытая тема (нет новых ответов) Вопрос про Телеграмм
18 syd2010 1149 28.11.2017, 14:25
автор: PostBrigada
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыАrticle manager вопрос
0 Smile3D 440 24.11.2017, 18:27
автор: Smile3D


 



RSS Текстовая версия Сейчас: 15.12.2017, 22:20
Дизайн