Question

我想知道是否能得到一些帮助。

我正在尝试创建一个HERO，在这里您可以看到我是如何将其与and标记一起编写的 https://www.screencast.com/t/COOZ3dCy9l

在这里您可以看到我如何处理CSS https://www.screencast.com/t/gSt4tvpY2C

在这里您可以看到结果根本不好 https://www.screencast.com/t/B5k1NS4J

我注意到我没有冒号“：”，所以我在后面加上了。但是，这没有用。我尝试使用图像的URL并链接到图像文件夹。

我想要页面顶部的Hero标题。我正在尝试使背景图片显示在其上方。

<!--Start of Hero-->

    <!DOCTYPE html>
<html>
<head>
<title>Connie's High Quality CLeaning</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
      <script src="javascript/javascript.js"></script>
</head>
<body>
<div class="hero-image">
   <div class="hero-text">
     <h1>
    Connie's
     </h1>
     <p>
    High Quality Cleaning Servive
     </p>
  </div>
</div>

<!--End of Hero-->

<!--start of external file style.css -->

body, html {
    height: 100%;
}
.hero-image{
  background-image: linear-gradient(rba(0,0,0,0.5)), url('images/kitchen.png');
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.hero-text{
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

<!-- End of external file style.css -->

Answer 1

嘿，我已经更改了CSS，并且效果很好。这是CSS：

body,
html {
  height: 100%;
}

.hero-image {
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/kitchen.png');
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

Answer 2

Maybee这样的东西。请注意，pagebackground在第0层是红色的，页面在第1层，固定标头在第2层。我不知道您想做什么，但可能会给出一个可行的想法：）

            <!--Start of Hero-->
            <!DOCTYPE html>
            <html>
            <head>
              <title>Connie's High Quality CLeaning</title>
              <link rel="stylesheet" type="text/css" href="css/style.css">
              <script src="javascript/javascript.js"></script>
              <style>
                        body,
                        html {
                            height: 100%;
                            width: 100%;
                            margin: 0px;
                            padding: 0px;
                            border: 0px;
                            background-color: red;
                        }

                        .hero-image {
                            background-image: linear-gradient(rba(0, 0, 0, .5)), url('images/kitchen.png');
                            height: 50%;
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: cover;

                        }

                        .hero-text {
                            text-align: center;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            color: white;
                        }

                        #HEROHEADER {
                            position: fixed;
                            z-index: 2;
                            left: 0px;
                            top: 0px;
                            width: 100%;
                            height:100px;
                            background-color: blue;

                        }

                        #HEROPAGE {
                            position: absolute;
                                             z-index: 1;
                            left: 0px;
                            top: 110px;
                            width: 100%;
                           height:calc(100% - 110px)
                            overflow: auto;
                            background-color: green;
                        }
              </style>
            </head>
            <body>
              <div id="HEROHEADER">
                <h1>Connie's</h1>
                <p>High Quality Cleaning Servive</p>
              </div><!--End of Hero-->
              <div id="HEROPAGE">
                <h1>Sic exclusis sententiis reliquorum cum praeterea nulla esse possit, haec antiquorum valeat
                necesse est.</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ut paulo ante docui, augendae
                voluptatis finis est doloris omnis amotio. <mark>Sullae consulatum?</mark> <em>Nihil illinc huc
                pervenit.</em> Cur igitur, inquam, res tam dissimiles eodem nomine appellas? Duo Reges:
                constructio interrete. Ergo ita: non posse honeste vivi, nisi honeste vivatur? <strong>Scisse
                enim te quis coarguere possit?</strong> <a href='http://loripsum.net/' target='_blank'>Bonum
                valitudo: miser morbus.</a> <em>Is es profecto tu.</em> <a href='http://loripsum.net/' target=
                '_blank'>Solum praeterea formosum, solum liberum, solum civem, stultost;</a> <strong>Sit sane
                ista voluptas.</strong></p>
                <ul>
                  <li>Bestiarum vero nullum iudicium puto.</li>
                  <li>Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt.</li>
                  <li>At modo dixeras nihil in istis rebus esse, quod interesset.</li>
                  <li>Facillimum id quidem est, inquam.</li>
                  <li>Quis enim potest ea, quae probabilia videantur ei, non probare?</li>
                  <li>Hic, qui utrumque probat, ambobus debuit uti, sicut facit re, neque tamen dividit
                  verbis.</li>
                </ul>
                <p>Inquit, dasne adolescenti veniam? Luxuriam non reprehendit, modo sit vacua infinita
                cupiditate et timore. <a href='http://loripsum.net/' target='_blank'>Sin aliud quid voles,
                postea.</a> Quid nunc honeste dicit? <a href='http://loripsum.net/' target='_blank'>Ita
                credo.</a> Quid de Pythagora? <em>Qui autem esse poteris, nisi te amor ipse ceperit?</em> Ne
                discipulum abducam, times.</p>
                <ol>
                  <li>De ingenio eius in his disputationibus, non de moribus quaeritur.</li>
                  <li>Profectus in exilium Tubulus statim nec respondere ausus;</li>
                  <li>Ut aliquid scire se gaudeant?</li>
                  <li>Is enim, qui occultus et tectus dicitur, tantum abest ut se indicet, perficiet etiam ut
                  dolere alterius improbe facto videatur.</li>
                </ol>
                <h1>Sic exclusis sententiis reliquorum cum praeterea nulla esse possit, haec antiquorum valeat
                necesse est.</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ut paulo ante docui, augendae
                voluptatis finis est doloris omnis amotio. <mark>Sullae consulatum?</mark> <em>Nihil illinc huc
                pervenit.</em> Cur igitur, inquam, res tam dissimiles eodem nomine appellas? Duo Reges:
                constructio interrete. Ergo ita: non posse honeste vivi, nisi honeste vivatur? <strong>Scisse
                enim te quis coarguere possit?</strong> <a href='http://loripsum.net/' target='_blank'>Bonum
                valitudo: miser morbus.</a> <em>Is es profecto tu.</em> <a href='http://loripsum.net/' target=
                '_blank'>Solum praeterea formosum, solum liberum, solum civem, stultost;</a> <strong>Sit sane
                ista voluptas.</strong></p>
                <ul>
                  <li>Bestiarum vero nullum iudicium puto.</li>
                  <li>Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt.</li>
                  <li>At modo dixeras nihil in istis rebus esse, quod interesset.</li>
                  <li>Facillimum id quidem est, inquam.</li>
                  <li>Quis enim potest ea, quae probabilia videantur ei, non probare?</li>
                  <li>Hic, qui utrumque probat, ambobus debuit uti, sicut facit re, neque tamen dividit
                  verbis.</li>
                </ul>
                <p>Inquit, dasne adolescenti veniam? Luxuriam non reprehendit, modo sit vacua infinita
                cupiditate et timore. <a href='http://loripsum.net/' target='_blank'>Sin aliud quid voles,
                postea.</a> Quid nunc honeste dicit? <a href='http://loripsum.net/' target='_blank'>Ita
                credo.</a> Quid de Pythagora? <em>Qui autem esse poteris, nisi te amor ipse ceperit?</em> Ne
                discipulum abducam, times.</p>
                <ol>
                  <li>De ingenio eius in his disputationibus, non de moribus quaeritur.</li>
                  <li>Profectus in exilium Tubulus statim nec respondere ausus;</li>
                  <li>Ut aliquid scire se gaudeant?</li>
                  <li>Is enim, qui occultus et tectus dicitur, tantum abest ut se indicet, perficiet etiam ut
                  dolere alterius improbe facto videatur.</li>
                </ol>
              </div><!--End of Hero-->
              <!--start of external file style.css -->
            </body>
            </html>

为什么我的HERO不显示带有文本的图像？

2 个答案: