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



 

Здравствуйте, гость (

| Вход | Регистрация )

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


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


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


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

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


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


style="opacity:1 !important"

Не помогло.


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

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


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


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

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


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


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


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


Прикрепленное изображение
<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


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


В #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


(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


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

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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3459 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3398 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Веб-разработка (HTML, CSS)
1 ViktoriaFE 6459 5.5.2021, 5:22
автор: bekett
Открытая тема (нет новых ответов) Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины).
0 kozak199110 1667 3.3.2021, 12:22
автор: kozak199110
Открытая тема (нет новых ответов) Продам адаптивный шаблон (css/html/js) под cj/tube сайт
2 zaiko 1434 29.12.2020, 23:49
автор: zaiko


 



RSS Текстовая версия Сейчас: 19.4.2024, 11:49
Дизайн