Авторизация на сайте

Последнее из портфолио

Как с нами связаться

  • 8 953 242 0439
  • +7 953 242 0439
  • ws-aprel@ya.ru
  • *******
  • Россия, г. Горячий Ключ
» » Как разместить полупрозрачный блок поверх слайдера?

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

galina2601 24-03-2015, 23:34 8 426 Уроки по CSS

На некоторых сайтах можно увидеть слайдер фотографий с размещенным поверх всего полупрозрачным блоком с какой-то надписью.


Это скриншот:

Скриншот

Фотографии меняются, а текст остается неизменным.

Конечно, можно такую штуку реализовать с помощью скрипта, но мне кажется что гораздо проще это сделать, используя CSS.

Возьмем, к примеру, два обычных блока, описанных с помощью тега <div>. Описываю произвольно, главное, чтобы они были разных размеров и цветов, чтобы можно было продемонстрировать их взаимное расположение.

 <style> #one {
width:200px;
height:100px;
background:rgba(13,350,56,1); 
}

#two{
width:250px;
height:80px;
background:rgba(213,350,56,1); 
}

</style>

<div id="one">ONE</div>
<div id="two">TWO</div>
ONE
TWO

Как видите, блоки располагаются друг под другом, так как и были описаны. Однако с помощью атрибутов мы можем блоки сдвинуть. Добавим в описание второго блока несколько строчек, сдвигающих блок вверх и вправо и изменим уровень прозрачности в атрибуте background с 1 до 0.8:

#two{
width:250px;
height:80px;
background:rgba(213,350,56,0.8); 
position: relative;
top: -90px;
left: 70px;

ONE
TWO

Второй блок разместился поверх первого и стал немного прозрачным.

Первый блок может содержать и тексты, и фотографии, и даже слайдер. То, что нам нужно.

Правда, нужно учесть еще один нюанс.

Чтобы второй блок наверняка располагался поверх первого, а не наоборот, к его описанию надо добавить еще один атрибут z-index.

Блоки на экране могут накладываться в несколько слоев. Чтобы четко определить какой блок "ближе" какой "дальше" каждому из них с помощью z-index присваивается значение глубины. Чем больше цифра, тем ближе блок к смотрящему на экран. Так что к описанию нашего блока TWO нужно добавить еще одну строчку вида z-index:100;

Похожие новости

  • Как сделать слайдер новостей из обычного слайдшоу
  • Как вставить панораму города на сайт
  • Как скрипт слайдера Карусель вставить на сайт DLE
  • Как сделать блок div гиперссылкой
  • Как добавить блок "Мы вКонтакте" на сайт?

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

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
    Кликните на изображение чтобы обновить код, если он неразборчив