Как сделать чтобы opacity не наследовалось

Обновлено: 01.07.2024

пока нет родительских селекторов (или как Шон Инман называет их, квалифицированные селекторов), поэтому вам придется применить стили к дочерним элементам списка, чтобы переопределить стили в родительских элементах списка.

каскадирование-это своего рода весь смысл каскадных таблиц стилей, отсюда и название.

вы либо используете дочерний селектор

сделает только детей первого уровня, чтобы применить стили. К сожалению, IE6 не поддерживает дочерний селектор.

в противном случае вы можете использовать

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

есть свойство под названием all на С помощью CSS3 наследования модуль. Он работает следующим образом:

по состоянию на 2016-12, все браузеры, кроме IE / Edge и Opera Mini поддержка этого свойства.

можно использовать * селектор изменить стили ребенка обратно в значение по умолчанию

упаковка с iframe делает Родительский css устаревшим.

короткий ответ: Нет, невозможно предотвратить наследование CSS. Можно переопределить только стили, заданные для родителей. См. спецификацию:

каждый элемент в HTML-документе наследует все наследуемые свойства от своего родителя, кроме корневого элемента ( html ), у которого нет родителя. -консорциума W3C

помимо переопределения каждого унаследованного свойства. Вы также можете использовать initial ключевое слово, например, color: initial; . Его также можно использовать вместе с all , например, all: initial; , это сбросит все свойства сразу. Пример:

таблицы поддержки браузера в соответствии с могу ли я использовать.

all (в настоящее время нет поддержки как в IE, так и в Edge, другие хорошо)
initial (в настоящее время нет поддержки в IE, другие хорошие)

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

таким образом, > селектор был бы полезен только с не унаследованными свойствами, когда дело доходит до предотвращения наследования.

вы можете использовать что-то вроде jQuery для "отключения" этого поведения, хотя я вряд ли думаю, что это хорошее решение, поскольку вы получаете логику отображения в css и javascript. Тем не менее, в зависимости от ваших требований вы можете найти CSS utils jQuery, чтобы облегчить вам жизнь, чем пытаться взломать css, особенно если вы пытаетесь заставить его работать для IE6

например, если у вас есть два div в документе XHTML.

затем попробуйте это в CSS.

влияет только див2 пункте.

влияет только див1 пункте.

вам не нужна ссылка на класс для li s. Вместо того, чтобы иметь CSS, как

это будет применять стиль только к li s, которые немедленно спускаются с боковой панели ul .

Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

Синтаксис

Значения

В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6 .

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования opacity

Браузеры

Firefox до версии 3.5 поддерживает нестандартное свойство -moz-opacity .

Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter : alpha(opacity=50) , где параметр opacity может принимать значение от 0 до 100.

Здравствуйте. Где-то месяц назад я опубликовал статью о том, как реализовать прозрачность cредствами css, где я пообещал в следующем посте рассказать как решить проблему прозрачности, когда все дочерние элементы унаследуют прозрачность от родителя и ничего нельзя с этим сделать. Для решения данной проблемы есть два способа.

Первый способ

К сожалению, с этим действительно ничего нельзя сделать, поэтому мы пойдём путём обмана – будем обманывать браузер. А именно, создадим 2 слоя, один рядом с другим. Один из них сделаем прозрачным, а другой заставим отображаться поверх первого, таким образом, они лишь визуально буду выглядеть как вложенные, но на самом деле они не будут являться дочерне-родительскими элементами, а следовательно, прозрачность первого не будет наследоваться ко второму элементу.

HTML код

CSS стили

Второй способ

Этот способ имеет один минус – не все браузеры ещё хорошо поддерживают css3, но зато он позволяет делать фон (и только фон) родительского элемента полупрозрачным, не затрагивая при этом дочерние элементы. Кроме того, для реализации данного способа, вам необходимо будет создать однопиксельную картинку с тем-же цветом и тем же уровнем полу прозрачности.

HTML код

CSS стили

Как видите, способы отличаются как реализацией, так и получаемым результатом. Выбирать особо не из чего, но если найдёте ещё какой-либо способ, то прошу поделиться им в комментариях к данной записи.

Пример работы обоих способов вы можете посмотреть здесь – верхние элементы – это первый способ, а нижние, соответственно, второй .

Надеюсь, что данный пост вам помог. Если есть вопросы – пишите в комментариях – отвечу.
__________________________
Хорошему сайту, для быстрой и нормальной работы необходим хороший хостинг, ну и конечно же без толкового хозяина ему тоже не обойтись 😉

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

Теория и практика

Реализуется данный подход с помощью свойства opacity. Предлагаю рассмотреть реальный практический пример и, отталкиваясь от него, будем изучать работу данного свойства.

В браузере будет примерно такая картинка:

Попрактиковались? Теперь подойдем ближе к теоретической стороне рассматриваемого вопроса.

Свойство opacity, которое отвечает за эффект CSS прозрачности, было создано на основе спецификации CSS3. В его значении указывается степень непрозрачности элемента в десятичных долях. Говоря более понятным языком, запись значения 0.9 для изучаемого свойства в нашем примере означает, что элемент, которому присвоено свойство, не прозрачен на 90%. Соответственно, если будет указан в значении 0, то наш блок станет полностью прозрачным и не будет заметен. Не смотря на это, он не исчезает со страницы, так как остается зарезервированное место для него среди элементов.

Главная проблема в использовании этого свойства заключается в показателе его кроссбраузерности. Так как свойство считается относительно молодым, то старые версии некоторых браузеров могут конфликтовать с ним. Чтобы этого избежать, нужно воспользоваться следующими свойствами и скриптом:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); - этот код предназначен для оптимизации работы IE. Именно таким способом формируется прозрачность блоков в этих браузерах. Этот фильтр относится к Alpha DirectX, в отличие от обычного свойства, в этом фильтре непрозрачность устанавливается не в десятичных долях, а в процентах.
-moz-opacity – вендорное свойство, которое отвечает за прозрачность блоков в старых версиях Firefox.
-khtml-opacity – этот вендор оптимизирует работу свойства в Safari и Konqueror.

К нежелательным эффектам использования этих вспомогательных свойств относится их неспособность пройти проверку на валидацию. Кстати само свойство opacity без проблем проходит проверку только в CSS Level 3 (так как свойство было включено именно в эту спецификацию).

Это свойство должно относиться к стилю просвечиваемого блока.

На заметку

При назначении родительскому блоку прозрачности все его дочерние элементы становится тоже полупрозрачными, что приводит к ухудшению читабельности текста этого контейнера. Чтобы избежать этого нежелательного эффекта требуется просвечивать только фон. Для этого создается отдельный контейнер для фона, и отдельный – для контента. Не забываем установить уровень наложения контента с помощью свойства z-index, в противном случае требуемый эффект достигнут не будет.

Вот так будет выглядеть наше решение в браузере

Стоит отметить, что прозрачность была увеличена специально, чтобы подчеркнуть тот факт, что контент не подсвечивается.

Затемнение фона

Иногда дизайнер требует затемнить фон страницы. Данная задача абсолютно аналогична предыдущему случаю. Для ее реализации просто необходимо взять черный фон и слегка его осветлить.

Не вижу смысла нагружать Вас новым кодом и предлагаю работать с предыдущим. В прошлой записи меняем только цвет фона с синего на черный и цвет шрифта на красный, чтобы сохранялся контраст. Да, еще думаю, для более эффективного затемнения повысим уровень непрозрачности до 0.7. Теперь, чтобы создать эффект затемнения, контейнер с черным фоном должен накладываться на контент, что также достигается через z-index.

Псевдокласс :hover позволяет элементам быть менее статичными, изменяя их свойства при наведении мышки.

all — все
none — никто

ease, он же cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear, он же cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in, он же cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out, он же cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out, он же cubic-bezier(0.42, 0, 0.58, 1.0)
step-start, он же steps(1, start)
step-end, он же steps(1, end) , он же steps(1)

Популярные сочетания transition с другими свойствами, например, opacity или transform

100 комментариев:

Наташа, спасибо.
Применил кручение на картинки. NMitra Пожалуйста! Приятно, что записи имеют применение. Анонимный Наташа, БОЛЬШОЕ Вам спасибо. Отличный блог, многое искал и нашел как раз в вашем блоге. Что больше всего радует- это написание статей понятным языком. NMitra Такие слова очень радуют слух и мотивируют на новые статьи! Космо Мизраил Горыныч А вы случаем не встречались с Даной Домирани? О_О Тоже великая дизайнерша!) NMitra Спасибо за комплимент :) Только до "великой" мне ещё далековато.
К сожалению, не встречалась. Космо Мизраил Горыныч ну почему же - вполне великая ;)
только вот последний пример дёргается как контуженый XD
очень порадовало свойство transform >_ NMitra М-да. Выпивающие, да ещё и контуженные снеговики :) По-хорошему нужно применять либо увеличение картинки, либо выплывающий текст. Из-за того, что мышка попадает то на изображение, то на область текста и получается не очень хорошо.

Никак не соберусь написать статью про transform. Космо Мизраил Горыныч NMitra, попробуйте со снеговиками так: пусть будет div, и в классах что-то типа: div.block6:hover img < . >div.block6:hover img:after < . >NMitra Супер! Вы правы, спасибо! Сама же написала только статью - http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html. :) Космо Мизраил Горыныч да, вижу >_ Космо Мизраил Горыныч Чёт я вас почитываю-почитываю, и мне приспичило вдруг создать свой блог!))))
Ссылко внизу будет :)
Тематика почти такая же, может быть, найдём друг у друга что-нибудь интересное ;)
Мож потом баннерами обменяемся?) NMitra Вот теперь красиво! Уважаю за такое внимание к деталям и желание "допилить" до идеала.

На самом деле мне приятно, что получается у читателей находить творческую нотку. Обращайся, помогу, чем смогу.

Очень немного и поверхностно. Ээээ. Из скрипта могу удалить ненужные фрагменты, тем самым настроив его под себя. С событием onclick недавно познакомилась.

Всё начинается с просьбы в комментарии и я лезу в дебри. А когда туда часто ходишь, дебри не кажутся такими уж ужасными.

Пока идеи отсутствуют. Космо Мизраил Горыныч ну я тоже в ява-скрипте ни бум-бум)))))

посмотрел ваш код.
короче, я в коде окончательно запутался %.% и сотворил свою панель. конструкция гораздо проще, эффект тот же самый :)

Этот казёл не даёт хтмл публиковать, видимо, создал на домашнем форуме для вас страничку: http://city.first-forum.com/h10-page
ну вы через огненную козявку код скопируете :) NMitra В понедельник посмотрю, сейчас день семьи ))) NMitra Сделала, зацени - http://shpargalkablog.ru/2011/08/svoya-panel-navigatsii-blogger.html. VivaL Здравствуйте, спасибо за сайт, много полезной информации.
Вот такой вопрос у меня: можно ли сделать, чтобы эффект-"увеличивавшие объекта в два раза transform: scale(2)" запускался от клика мышкой.
Если можно, то в какую сторону копать?
Спасибо. NMitra Не ставила перед собой данной задачи. Я бы смотрела в сторону getElementById('').style. Но сомневаюсь, браузеры используют префикс.

Или сделала что-то вроде

Нужно, чтобы оба значения были указаны или в процентах или в величинах, например px. Есть ещё calc. Анонимный Спасибо большое за ответ!
В процентах таже картина, разворачивается, но без задержки.
А не подскажите может какойнить другой способ?
Нужно, чтоб при длинном тексте, часть теста скрывалась (видимая часть должна быть одинаковой), а при наведении курсора раскрывалась, но только на размер элемента (текста)
Спасибо. NMitra Смотрите в сторону позиционирования. Вам нужно показать поверх всего содержания текст или чтобы развёрнутый текст сдвигал остальной контент? Анонимный Пока сдвигает контент, но я не против, смотрится нормально, хочется пока чтоб показывало (разворачивало) только по размеру текста NMitra Ваш вопрос поняла, подумаю до конца недели, может завтра что и напридумаю. Анонимный Буду премного благодарен.
Спасибо за отзывчивость. NMitra Посмотрела, подумала. Разворачиваться плавно не будет. Можно другой какой-нибудь эффект или задать фиксированное значение или JavaScript

Спасибо за вашу статью, очень интересна.

Скажите а можно ли сделать чтобы блок появлялся через несколько секунд сам, а не при наведении. NMitra Добрый день, можно с помощью анимации http://shpargalkablog.ru/2012/03/animaciya-css.html
Пример: http://shpargalkablog.ru/2013/06/popup.html Андрей Фролов Спасибо большое. буду изучать. va0816 некоторые простые анимации можно сделать без animation
Например можно сделать такую неоновую рамку: http://jsfiddle.net/x8v6wvt5/ NMitra setInterval - это и есть анимация, только в JavaScript. Или я не поняла вас? Анонимный А как сделать что бы фон менялся плавно туда сюда у дива без ховера? NMitra С помощью animation
Как здесь http://shpargalkablog.ru/2013/12/blink-text.html только с фоном
Подробнее http://shpargalkablog.ru/2012/03/animaciya-css.html Анонимный Да, но где выставлять стартовый фон, а где финальный? Просто если поставить диву какой либо бэкграунд в стилях, он патом не меняется Анонимный А все понял, вместо колор нужно прописать background) NMitra "патом" неправильно писать, нужно "потом".
Извините за замечание, аж глаз режет. Анонимный хорошо, сам не заметил) Анонимный А подскажите пожалуйста, возможно ли совместить две анимации, первая - это когда меняется фон у круга, скажем два-три раза, а затем идет от него box-shadow (похоже как разводы на воде от упавшего в нее камня), причем когда начинается эффект box-shadow фон в круге уже не меняется и затем анимация начинается заново, такое возможно? может есть какие то команды дополнительные что бы регулировать анимацию, был бы очень признателен за совет. Вот пример двух анимаций, о возможности совмещения которых я говорю:

Читайте также: