TryIt Editor v2.0 - Как создать эффект наложения с помощью CSS

Source Code: (back to article)

<!DOCTYPE html> 
<html>
  <head>
    <title>overlay div</title>
    <style> 
      body{
      position: relative;
      padding: 20px;
      margin:0;
      min-height:100%;
      font-family: 'Open Sans', sans-serif;
      background: #8ebf42;
      color: #eeeeee;
      }
      .overlay {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 10;
      background-color: rgba(0,0,0,0.6);
      }
      .modal {
      width: 300px;
      height: 200px;
      line-height: 200px;
      position: fixed;
      top: 40%; 
      left: 50%;
      margin-top: -100px;
      margin-left: -150px;
      background-color: #8ebf42;
      border-radius: 40px;
      text-align: center;
      z-index: 11; 
      }
    </style>
  </head>
  <body>
    <h2>Создание наложения с абсолютно позиционированным элементом</h2>
    <div class="overlay"></div>
    <div class="modal">Lorem Ipsum - это текст-"рыба" </div>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
  </body>
</html>