Как убрать opacity у дочернего элемента
Перейти к содержимому

Как убрать opacity у дочернего элемента

  • автор:

Как убрать opacity у дочернего элемента?

Вот тут реализация на jsfiddle — http://jsfiddle.net/U5CLR/ Как убрать opacity (точнее вернуть его к значению 1) для блока #block3? Спасибо.

Отслеживать
задан 8 мар 2013 в 19:36
53 1 1 золотой знак 1 1 серебряный знак 10 10 бронзовых знаков
Наследование. Нужно вынести наружу block3, за пределы block2
8 мар 2013 в 19:41

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

а) Избавиться от наследования, вынести #block3 из #block2 ;

б) Избавиться от opacity , заменив его rgba(. ) для цветов и полупрозрачными *.png для изображений.

Отслеживать
ответ дан 8 мар 2013 в 19:52
2,670 2 2 золотых знака 20 20 серебряных знаков 32 32 бронзовых знака
вероятно, rgba?
9 мар 2013 в 0:13
@VladD, опечатка 🙂
9 мар 2013 в 2:00

#block2 < background: rgba(255, 0, 0, 0.5); /*красный цвет поменяете на свой*/ >

opacity убрать надо везде

Отслеживать
4,966 10 10 золотых знаков 35 35 серебряных знаков 62 62 бронзовых знака
ответ дан 8 мар 2013 в 22:02
A_Gontarev A_Gontarev
11 1 1 бронзовый знак
Собственно, это и написано в моём ответе, зачем дублировать?
8 мар 2013 в 22:09
@A_Gontarev, Чтобы отформатировать код, выделите его мышью и нажмите на кнопку <> редактора.
9 мар 2013 в 13:03

Как вариант, заменить бг на полупрозрачный пнг!

Отслеживать
ответ дан 9 мар 2013 в 6:52
1,180 5 5 серебряных знаков 8 8 бронзовых знаков

  • opacity
  • css
    Важное на Мете
Связанные
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.5.3.8609

Как убрать opacity у дочернего элемента?

Как убрать opacity (точнее вернуть его к значению 1) для блока #block3?

а) Избавиться от наследования, вынести #block3 из #block2 ;

б) Избавиться от opacity , заменив его rgba(. ) для цветов и полупрозрачными *.png для изображений.

#block2 < background: rgba(255, 0, 0, 0.5); /*красный цвет поменяете на свой*/ >

opacity убрать надо везде

Как вариант, заменить бг на полупрозрачный пнг!

  • как убрать
  • дочернего элемента
  • убрать opacity

Создание интернет-магазина посуды в ABCname

Подробнее о сайте standart-s.com.ua

  • Почему SERVER_ADDR имеет не тот IP 46771 visits
  • Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30303 visits
  • Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 22911 visits
  • Как через css изменить цвет png изображения? 10177 visits
  • Blob video url download 9806 visits
  • Php curl запрос через прокси с авторизацией 9064 visits
  • Работа с captcha vk api 7981 visits

Парсер на bs4. Не могу достать span с класса а

А проблема собственно заключается вот в чем: все в коде работало до добавления строки с названием товара ‘name’После этого начал ловить ошибку

Bootstrap 4 + Isotope

Использую isotope для создания masonry сетки + Bootstrap 4 (flex):

Как удалить сразу несколько объектов из DOM?

Подскажите, есть ли способ в JQuery удалить через remove() сразу несколько объектов с одним идентификаторам?

Jquery(Нубский вопрос)

Функция работает некорректноПри нажатии на кнопку изменение происходит на миг и не фиксируется

Дочерний элемент без opacity (или filter:blur). Вопрос гуру/джедаям CSS?

Суть в том, что если для родителя задан стиль opacity менее 1, то оно распространяется и на вложенные элементы. Я же хочу обойти эту зависимость и оставить определенный див в обычном состоянии, пока для других работает opacity: 0.5;

Я знаю про это: codepen.io/impressivewebs/details/CyfED но эти надстройки меня не устраивают — ищу решение на чистом CSS.

Гуру CSS, если вы водитесь на тостере — откликнетесь пожалуйста. Может быть вы в курсе, существуют ли малоизвестные хаки или возможности слабо документированные в спецификациях CSS?

  • Вопрос задан более трёх лет назад
  • 4108 просмотров

Комментировать
Решения вопроса 1
NewTypes @NewTypes Автор вопроса

Есть мысля насчет :hover, но не знаю как реализовать

UPD: Решено. Сейчас работаю — позже может распишу.

Как сделать элемент прозрачным и убрать прозрачность CSS?

Для того, чтобы сделать элемент прозрачным, следует использовать CSS. Для стилей есть полезное свойство opacity, в котором остаётся лишь указать степень прозрачности. Где, как правило 1 или 100 — элемент не прозрачен, а 0.1 или 10 — это прозрачный элемент. Почему два значения? Потому что для IE (Internet Explorer), равно как и для других браузеров, прописываются другие свойства, и у IE прозрачность измеряется в других значениях.

Полупрозрачный элемент

Соответственно, чтобы сделать элемент полупрозрачным, нужно задать для opacity значение 0.5 или 50.

Код CSS

filter:alpha(opacity=50); /* для IE 5.5+ */ 
-moz-opacity:0.5; /* для Mozilla 1.6 и ниже */
-khtml-opacity:0.5; /* для Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */

Как убрать прозрачность дочернего элемента?

Например, Вы задали прозрачность всем пунктам меню, а при навведении как раз хотите сделать НЕ прозрачным (убрать прозрачность), то прописываете ему следующие характеристики, где значение прозрачности равно 1 или 100:

Код CSS

filter:alpha(opacity=100); 
-moz-opacity:1;
-khtml-opacity:1;
opacity: 1;

Не забываем указывать все 4 свойства, так как в противном случае действие будет не кроссбраузерно, то есть будет работать не во всех браузерах.

Если хотите, чтобы полупрозрачность были при наведении на изображение, то можно создать, например такой класс

.opacity :hover filter:alpha(opacity=50); /* для IE 5.5+ */ 
-moz-opacity:0.5; /* для Mozilla 1.6 и ниже */
-khtml-opacity:0.5; /* для Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
>

Рассмотрим пример

Создаём файл index.html

 

<br />Название странички <br />





Полупрозрачность элемента


Делаем изображение полупрозрачным при наведении!




Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *