Текст скрывается под изображением

Я создаю простую страницу html, которая покажет, что сайт находится под техобслуживанием. Существует изображение, которое охватывает всю страницу, и текст должен быть показан в центре изображения. Однако текст скрыт под изображением. Я думаю, это потому, что я использую jQuery для выравнивания изображения для охвата всей страницы. Я ценю любые комментарии или примеры кода, которые могут помочь.Текст скрывается под изображением

$(window).load(function() { 
 
    var theWindow = $(window); 
 
    var $bg = $("#bg"); 
 
    var aspectRatio = $bg.width()/$bg.height(); 
 
    
 
    function resizeBg() { 
 
     if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
 
      $bg.removeClass().addClass('bgheight'); 
 
     } else { 
 
      $bg.removeClass().addClass('bgwidth'); 
 
     } 
 
    } 
 
    
 
    theWindow.resize(resizeBg).trigger("resize"); 
 
});

html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#bg { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.bgwidth { 
 
    width: 100%; 
 
} 
 

 
.bgheight { 
 
    height: 100%; 
 
} 
 

 
p { 
 
    overflow: inherit; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <title>Page under maintenance</title> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
     <p>This website is down.</p> 
 
     <img src="2.jpg" alt="Maintenance View" id="bg"> 
 
    </body> 
 
</html>

источник

2015-12-08 Irfana

Просто добавьте z-index в p.

<p style="position: relative; z-index: 1; font-size: 3em; font-weight: bold; 
    color: yellow;">This website is down.</p>

DEMO

источник

2015-12-08 03:35:42

p { 
    overflow: inherit; 

    /* Add these */ 
    position: relative; 
    z-index: 1; 
}

Просто дайте ему более высокий Z-индекс, чтобы привести его вперед.

источник

2015-12-08 03:33:18 AVAVT

Текст скрывается под изображением

ответ

Смежные вопросы