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



 

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

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


Участник
***

Группа: User
Сообщений: 191
Регистрация: 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
Сообщений: 191
Регистрация: 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


Новый статус (1)
*******

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


А еще лучше сюда выложить 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
Сообщений: 191
Регистрация: 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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Вопрос по поводу цен на сайте
16 WildWeb8 944 13.5.2018, 17:40
автор: genjnat
Открытая тема (нет новых ответов) Перенесу вашу HTML+CSS верстку на Wordpress
0 blackhead 397 9.5.2018, 14:50
автор: blackhead
Открытая тема (нет новых ответов) Есть эксперты HTML + CSS ?
4 _fan_ 631 3.5.2018, 22:32
автор: _fan_
Открытая тема (нет новых ответов) Вопрос к тем, кто зарабатывает на недвижимости?
Как заработать на недвижке.?
15 Dross 2755 26.4.2018, 18:26
автор: megachange
Открытая тема (нет новых ответов) Sonar.Network - облачный сервис поиска ошибок на сайте, валидации html, js, css
0 Tchort 985 20.4.2018, 17:53
автор: Tchort


 



RSS Текстовая версия Сейчас: 25.5.2018, 6:00
Дизайн