Скрыть текст под изображение/цвет фона

Question

У меня есть логотип (изображение внутри DIV) с этими свойствами в jade -

style="opacity:1;filter:alpha(opacity=100);display:block;border-bottom: thick solid #000000;background:rgba(255, 255, 255, .8)"

Этот DIV находится на верхней части страницы и отчет отображается как основное содержание. Я использую stickyjs, чтобы сохранить логотип при прокрутке страницы. Но, когда я прокрутки вниз содержимое страницы за логотип не скрыт и виден как текст позади изображения, как,

Как я могу установить параметры для background-color, чтобы скрыть содержание текста лёжа под?

Answer 1

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

Working CodePen Demo

HTML

<div id="main"> 
    <div id="header"> 
    <img src="http://www.myiconfinder.com/uploads/iconsets/256-256-1c93adf1d2e3c02dcb629a40fb065e81.png" /> 
    </div> 
    <div id="content"> 
    <p>This is the body content.</p> 
    ... 
    <p> 
    <p>This is the body content.</p> 
    </div> 
</div> 

CSS

#header { 
    height: 60px; 
    width: 100%; 
    position: fixed; /* Keeps the header fixed at the top of the page */ 
    top:0; 
    z-index: 10; 
    background-color: #fff; /* opaque background to hide text */ 
    margin: 0; 
    padding: 0; 
} 
#header img { 
    height: 100%; 
} 
#content { 
    position: absolute; /* begin content beneath header */ 
    top: 55px; 
    z-index: -1;   /* hide the body text */ 
} 

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