Css блок прозрачный: Как сделать слой полупрозрачным? | htmlbook.ru

Leave a Comment / Css / By /

html — Перекрытие блока прозрачным блоком

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

Важно, чтобы структура была примерно такая, т.к. 1-у блоку будет задана анимация, которая будет поднимать его вверх и по мере продвижения будет появляться 2-й блок:

<div></div> 
<div> </div>
  • html
  • css
  • вёрстка

1

Я не уверен, чего вы хотите, но это похож на вашу картинку:

body {
  background-color: yellow;
}
#div1 {
  width: 200px;
  height: 50px;
  background: transparent;
  border: 1px solid red;
  margin: auto;
}
#div2 {
  width: 100px;
  height: 50px;
  color: white;
  background-color: black;
  margin: auto;
}
<div>div 1</div>
<div>div 2</div>

Например так: HTML:

<div>
<div>
<div></div></div></div>

CSS:

. wrap {position:relative;}
.div1 {opacity:0.5; position:absolute; top:0; left:0; right:0; bottom:0; z-index:2;}
.div2 {width:500px; height:100px; position:relative; z-index:1;}

То есть для прозрачного блока делаем абсолютное позиционирование относительно родителя.

UPDATE 1

Ну Вам тогда не подойдет перекрытие. Там нужно делать анимацию меняя padding-top. Тогда будет нужный Вам эффект. Наведите на черный элемент. Вот пример на JsFiddle

2

Прозрачный ничего перекрывать не может.

Способ 1: вместо прозрачности унаследовать фон.

Способ 2: Второй положить во вреппер с overflow:hidden и двигать внутри него.

Способ 3: Использовать clip.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Свойство заказа CSS

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

Установите порядок гибких элементов:

div#myRedDIV {порядок: 2;}
div#myBlueDIV {порядок: 4;}
div#myGreenDIV {порядок: 3;}
div# myPinkDIV {order: 1;}

Попробуйте сами »

Определение и использование

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

Примечание: Если элемент не является гибким, Свойство порядка не действует.

Показать демо ❯

Значение по умолчанию: 0
Унаследовано: нет
Анимация: да, см. отдельные свойства . Читать про анимированный Попробуй
Версия: CSS3
Синтаксис JavaScript: объект .style.order=»2″ Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.

Собственность
заказ 29,0
21,0 -вебкит-		 11,0 28,0
18,0 -мунц-		 9. 0
6.1 -вебкит-		 17,0

Синтаксис CSS

порядок: номер |начальный|наследовать;

Значения свойств

Значение Описание Демо
номер Значение по умолчанию 0. Указывает порядок гибкого элемента Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про
начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Справочник CSS: свойство flex

Справочник CSS: свойство flex-basis

Справочник CSS: свойство flex-direction

Справочник CSS: свойство flex-flow

Справочник CSS: свойство flex-grow

Справочник CSS: свойство flex-shrink

Справочник CSS: свойство flex-wrap

Справочник CSS: свойство align-content

Ссылка CSS: свойство align-items

Справочник CSS: свойство align-self

Ссылка HTML DOM: свойство order

❮ Предыдущая Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.
CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Непрозрачность CSS — Studytonight

Свойство непрозрачности CSS определяет прозрачность элемента по шкале от 0,0 до 1,0 . Чем больше значение непрозрачности, тем четче элемент. Элемент полностью прозрачен или чист, когда значение равно 1,0 , что также является значением по умолчанию, при 0,5 элемент отображается довольно размыто , а при 0.0 элемент полностью непрозрачен.

Синтаксис свойства непрозрачности в CSS 

 элемент HTML{
непрозрачность: значение;
}

Пример: применение непрозрачности к элементу HTML

В данном примере мы создали три заголовка, используя элементы

,

и

.

В заголовке 1 мы указали значение непрозрачности на 0,0 , в заголовке 2 мы указали значение непрозрачности до 0,5 , и в заголовке 3 мы указали значение от до 1,0. 

 

<голова>
Непрозрачность CSS
<стиль>
ч2 {
цвет фона: красный;
непрозрачность: 0,0;
}
h3{
непрозрачность: 0,5;
цвет фона: красный;
}
h4{
непрозрачность: 1,0;
цвет фона: красный;
}


<тело>
 
Заголовок 1
 
 
Заголовок 2
 
 
Заголовок 3

Вывод:

Итак, после реализации мы видим, что заголовок 1 со значением 0.0 вообще не виден

. В заголовке 2 , значение opacity которого равно 0,5 , содержимое довольно размыто , но видно , в то время как в заголовке 3 чье значение opacity равно 1,0 ясно видно .

Эффект прозрачности и наведения в CSS

CSS позволяет нам использовать непрозрачность CSS вместе с эффектом :hover . Когда мы обеспечиваем эффект наведения для любого элемента, его непрозрачность изменяется, когда пользователь наводит на него указатель мыши.

Пример: применение эффекта прозрачности и наведения в CSS

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

 

<голова>
<стиль>
картинка {
  непрозрачность: 0,5;
}
изображение: наведите {
  непрозрачность: 1,0;
}


<тело>
 
Прозрачность изображения
 
Лес
Горы
Италия

Вывод:

Как мы видим, все три изображения размыты, потому что мы указали свойство CSS непрозрачность со значением 0,5 .

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

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