Блог

Главная - Вопросы по программированию - Скрыть весь текст за прозрачным заголовком, но не за изображениями

Скрыть весь текст за прозрачным заголовком, но не за изображениями

#javascript #html #jquery #css #dom

#javascript #HTML #jquery #css #dom

Вопрос:

Привет!

Мне нужна ваша помощь, чтобы скрыть весь текст за прозрачным заголовком (пример), потому что он не читается .. изображение не проблема, а только текст .. я хочу, чтобы заголовок был прозрачным .. .float-menu.container{background:rgba(255, 255, 255, 0.4);

Я не могу найти решение..

спасибо ..!

 #myHeader {
  width: 100%;
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  position: fixed;
  height: 50px;
  top: 150px;
}

body {
  height: 2000px;
  background: red;
}

#paragraf {
  padding-top: 200px;
} 
 <body>

  <div id="myHeader">
    This is my header element.
  </div>

  <p id="paragraf"><b>Note:</b> I want to hide all text</p>
  <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
   <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
     <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
      <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
       <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
         <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
          <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
           <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>

</body>

Комментарии:

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

2. например, так jsfiddle.net/vkusq9zo

Ответ №1:

Внес несколько изменений в ваш CSS и HTML:

  • Добавлен div с .wrapper классом, и все теги p переместились в него.
  • Затем добавил этот стиль CSS в оболочку:
 .wrapper {
  position: absolute;
  top: 50px; 
  overflow: scroll;
  max-height: calc(100vh - 50px);
}

Объяснение:

  • Добавлена абсолютная позиция в оболочке и установлена top: 50px (высота заголовка, чтобы они не перекрывались друг с другом.
  • Переполнение установлено для прокрутки, чтобы содержимое тега p не было видно за заголовком.
  • и максимальная высота, установленная на calc(100vh - 50px) , вычитается 50 пикселей (высота заголовка) из всей высоты окна просмотра (100vh)

Я считаю, что это то, что вы ищете:

 #myHeader {
  width: 100%;
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  position: fixed;
  height: 50px;
  top: 0;
}

body {
  background: red;
  margin: 0;
}

.wrapper {
  position: absolute;
  top: 50px; 
  overflow: scroll;
  max-height: calc(100vh - 50px);
} 
 <body>

<div id="myHeader">
  This is my header element.
</div>
<div class="wrapper">
    <p id="paragraf"><b>Note:</b> I want to hide all text</p>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</div>
</body>

Комментарии:

1. Спасибо за ваше предложение, но я думаю, что это то же самое, что и заголовок, не прозрачный.. Я хочу скрыть только текст, а не изображения .. ? мы можем видеть изображения под заголовком, но не текст тела.. Я надеюсь, что кто-нибудь сможет мне помочь.. Спасибо

2. Вы вообще проверяли код? Фон заголовков белого цвета с непрозрачностью 0,4, из-за чего на заголовке виден розоватый цвет, попробуйте изменить основной фон, вы увидите прозрачность заголовка, и текст не будет виден, а изображение будет видно

3. Да, я проверяю ваш код, но если у меня есть одно изображение в содержимом, заголовок также скрывает изображение. jsfiddle.net/8gmqhkjo/1

4. Для достижения этого вам также понадобится javascript, и добиться этого довольно сложно

5. я не очень хорошо знаю javascript.. но я уверен, что это возможно с помощью DOM of navigateur..

Метки: ,