const topAppBarElement = document.querySelector('#head');
const topAppBar = new MDCTopAppBar(topAppBarElement);
const tabBar = new MDCTabBar(document.querySelector('#list'));
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});a {
text-decoration: none !important;
}
.font {
font-family: "Google Sans" !important;
}
.white{
--mdc-theme-primary: #ffffff;
height: 100%;
}
.spacer{
display:inline-block;
width:50%;
}
.hero {
font-size: 3em;
line-height: 0.1;
text-align: center;
}
.hero-title {
position: absolute;
z-index: 1;
color: #fff;
top: 40%;
left: 0;
right: 0;
margin: auto;
}
.hero-image {
background:url(Background.jpg) no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
.resize{
margin-top: 150px;
height: 100px;
width:250px;
}
.fab{
position: absolute;
left: 50%;
bottom: 20px;
transform: translate(-50%, -50%);
margin: 0 auto;
--mdc-theme-secondary: #5f37ee;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">`enter code here`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<header class="mdc-top-app-bar mdc-top-app-bar--short font " id="head">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<span class="mdc-top-app-bar__title font">Edufile</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<span class="spacer"></span>
<div class="mdc-tab-bar white" role="tablist" id="list">
<div class="mdc-tab-scroller" >
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active font" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Home</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab mdc-tab--active font" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">About Us</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab mdc-tab--active font" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Login</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab mdc-tab--active font" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Signup</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
</section>
</div>
</header>
<br><br>
<section class="hero">
<div class="hero-image">
<img src="C:\Users\bhavy\Pictures\Edited\2.png" alt="" class="resize">
<div class="hero-title">
<h2 class ="font">Code Different</h2>
<h5 class="font">Code makes you free</h5>
</div>
</div>
</section>
<a href="#section1"><button class="mdc-fab fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">keyboard_arrow_down</span>
</button></a>
<div class="" id="section1">
<p class="white font">Lorem ipsum dolor sit amet, ne his minim legimus verterem, eos at alterum alienum, mazim munere postea mea no. No option aeterno sed, quas forensibus elaboraret mel ei. Vim tantas euismod detraxit in. Mel libris graecis ei. Ea suas euripidis eos, eos at diam case disputationi, usu dicunt forensibus te. Facer repudiandae est te.
Adipisci voluptaria te mei, his eu vivendum inimicus, ne his quas libris. Sale praesent ex per, mei malis rationibus definitiones cu, ea soluta assentior vim. Cu sed insolens atomorum, et mea fastidii concludaturque. Alia commune his ei, quando everti apeirian pri at, te eos veritus urbanitas. Sumo tincidunt eos at.
Et eos quaestio persecuti, ne affert tacimates disputationi nam, cum justo tincidunt ea. Ad sit doming noluisse laboramus. Cu eum accumsan scaevola, et vix nisl ridens electram. Quo at inermis urbanitas definitiones. Has timeam persius mnesarchum an, ei vis dicit iudico consequat, graecis hendrerit concludaturque sit ea.
Qui ad dolore legimus. Mea ne appetere pertinax, no iuvaret eruditi has, ea dicant libris graeci vel. Id duo unum illud phaedrum, decore eloquentiam duo id. Vim no diam soleat, ex inermis expetendis sea, doctus nusquam fuisset usu an. In integre honestatis usu, mei errem incorrupte suscipiantur at, ut mei affert nonumy eloquentiam. Mel ea simul docendi nominavi.
An iudico mollis corrumpit cum. Temporibus theophrastus ei per, sea iudicabit splendide contentiones cu. Eam ex hinc dolorum, cum at timeam postulant. Vis at nostrum neglegentur, vim et fugit gubergren, instructior reprehendunt pro te. Vel probo habemus neglegentur ex, illud splendide ius id.
Qui et simul nobis aperiri, vel ne case persequeris signiferumque. Est perfecto intellegam signiferumque ad. Elit viris nonumes pro cu. Ad his viris munere, mel ad regione inermis blandit. Verterem indoctum consequat in vim, fuisset placerat eloquentiam vim ne. Sed cu fuisset offendit, saepe facete ei mea.
Pri te wisi delicata percipitur, at scaevola lobortis mea. No mea habeo sadipscing ullamcorper. Ad vel doctus commodo. Vix malis tation contentiones te.
Primis facete cum in, pri vituperata accommodare et. Usu possit consetetur ut. Mentitum intellegebat id sed, id augue offendit appetere quo. Pri quando aeterno laoreet ea, eum alii corpora eu. Id nam hinc vidisse referrentur.</p>
<a href="section1"></a>
</div>
<script type="text/javascript">
</script>
</body>
</html>
我的lorem ipsum文字隐藏在英雄图像后面，您能告诉我该怎么办吗？？
答案 0 :(得分：1)
如果要在文本图像上方和下方添加文本，可以对CSS进行一些小的更改，而Hero图像将位于文本下方。
请找到以下CSS代码。
.hero-image {top: auto;}
设置为最高值：0；图片会显示在页面顶部，从而隐藏了文字。
另一个答案是，如果要在图像上方添加文本，则可以使用以下CSS代码。
#section1 { clear: both;
position: absolute;
top: auto;
left: 0;
z-index: 99;
color: #fff;}
但是我不认为这是您的要求。您可以使用第一种解决方案。
注意：请进一步澄清您的问题，以便我给您正确的答案。
谢谢。