不能將CSS居中 -有解無憂

我正試圖按照一個視頻來創建一個完整的網站專案。目前，我正試圖將影片添加到一個標題中，該標題被分成三部分，并且都在.NET中。不管是什么原因，當涉及到用背景覆寫頁眉并應用影片時，我無法復制他在視頻中的做法。當我寫下同樣的代碼時，標題并沒有被完全遮擋，而且我的影片也與視頻中的不一樣。

它應該看起來像正確的方式，標題應該被覆寫

當我編碼時，它看起來像什么。在此輸入圖片描述

@import url('https://fonts.googleapis.com/css2?family=IBM Plex Serif:wght@200& display=swap'/span>) 。
* {
  Padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 10px;
  color: white;
  font-family: 'IBM Plex Serif', serif;
}

a {
  text-decoration: none;
}

body {
  background: rgb（123, 127, 153）。
}

.container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}


/* 英雄部分 */; /* 英雄部分

#hero {
  background-image: url（./img/galaxy.jpeg）。
  background-size: cover;
  background-position: top center;
  position: relative;
  z-index: 1;
}

#hero: :after {
  content: ''/span>;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: 藍色。
  opacity: .2;
  z-index: -1;
}

#hero h1 {
  display: block;
  width: fit-content;
  字體大小: 4rem;
  position: relative;
  color: white;
}

#hero span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: 紅色。
  animation: text_reveal_box 1s ease;
}

#hero .cta {
  display: inline-block;
  padding: 10px 30px;
  position: relative;
  left: 55px;
  align-items: center;
  color: red;
  background-color: transparent;
  border: 2px solid red;
  字體大小: 2rem;
  text-transform: 大寫字母。
  letter-spacing: .1rem;
  margin-top: 30px;
  transition: .3s ease;
  transition-property: background-color, color;
}

#hero .cta：hover {
  color: white;
  background-color: red;
}


/* 結束英雄部分 */。


/* 關鍵幀*/ /* 關鍵幀 */

@keyframes text_reveal_box {
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%。
  }
}

<!DOCTYPE html>
<html> 

<head> 
  < link rel="styleheet" type="text/css" href="style. css">
  <title>/span>FullSite</title>/span>
  <meta charset="UTF-8">/span>
</head> 

<body> 
  <!--開始英雄部分-->
  <section id="hero">
    <div class=" hero container">
      <div>/span>
        <h1><span>Hello。 ...</span></h1> 
        <h1><span> 我們是</span></h1> 
        <h1><span>/span>J.P. Astronomics</span>/span></h1>
        < a href="#"/span> type="button" class="cta"> Portfolio</a>。
      </div>/span>
    </div>/span>
  </section>/span>
  <!--結束英雄部分-->

  <!--開始天文目標-->
  <section id="service"/span>>
    <div class="服務容器">/span>
      <div class="servivce-top">
        <h1 class="section-title"/span>> 天文目標</h1>。
      </div>/span>
    </div>/span>
  </section>/span>
  <!--結束天文目標-->
</body>/span>

</html>/span>

uj5u.com熱心網友回復：

你必須洗掉以下css和ass一些樣式來實作設計

 position: absolute;
  top: 0;
  left: 0;
  高度：100%。
  寬度：100%。

。

@import url("https://fonts.googleapis.com/css2?family=IBM Plex Serif:wght@200& display=swap"/span>) 。
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 10px;
  color: white;
  font-family: "IBM Plex Serif", serif;
}

a {
  text-decoration: none;
}

body {
  background: rgb（123, 127, 153）。
}

.container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}


/* 英雄部分 */; /* 英雄部分

#hero {
  background-image: url（./img/galaxy.jpeg）。
  background-size: cover;
  background-position: top center;
  position: relative;
  z-index: 1;
}

#hero: :after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: 藍色。
  opacity: 0.2;
  z-index: -1;
}

#hero h1 {
  font-size: 4rem;
  position: relative;
  color: white;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#hero span {
  background-color: 紅色。
  color: red;
  animation: text_reveal_box 1s ease;
}

#hero .cta {
  display: inline-block;
  padding: 10px 30px;
  position: relative;
  align-items: center;
  color: red;
  background-color: transparent;
  border: 2px solid red;
  字體大小: 2rem;
  text-transform: 大寫字母。
  letter-spacing: 0.1rem;
  margin-top: 30px;
  transition: 0.3s ease;
  transition-property: background-color, color;
}

#hero .cta：hover {
  color: white;
  background-color: red;
}


/* 結束英雄部分 */。


/* 關鍵幀*/ /* 關鍵幀 */

@keyframes text_reveal_box {
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%。
  }
}

<section id="hero"> 
  <div class=" hero container">
    <div class=" heading-wrapper">/span>
      <h1><span>/span>你好。 ...</span></h1> 
      <h1><span>/span>J.P. Astronomics</span>/span></h1>
      <h1><span> 我們是</span></h1> 
      < a href="#"/span> type="button" class="cta"> Portfolio</a>。
    </div>/span>
  </div>/span>
</section>/span>
<!--結束英雄部分-->

<!--開始天文目標-->
<section id="service"/span>>
  <div class="服務容器">/span>
    <div class="servivce-top">
      <h1 class="section-title"/span>> 天文目標</h1>。
    </div>/span>
  </div>/span>
</section>/span>

uj5u.com熱心網友回復：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

body {
  background: rgb（123, 127, 153）。
}

.container {
  width: min(80%, 1200px) 。
  margin: auto;
  min-height: 100vh;
}

.hero {
  border: 2px solid red;
  display: grid;
  place-items: center;
}

.hero-text {
  border: 2px solid yellow;

  display: inline-block;
  line-height: 1;
  margin: 5em auto;
}
span {
  display: inline-block;
  margin-right: auto;

  position: relative;
  字體大小: clamp(1.5rem, 5vw   10px, 3rem) 。
  animation: reveal_anim 1s forwards;
}
span：:before {
  content: "";
  position: absolute;
  background-color: 紅色。
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1;
}

a {
  text-decoration: none;
}

.cta {
  display: inline-block;
  margin-right: auto;
  margin-top: 1em;
  padding: 0.2em 0.5em;
  字體大小。clamp（1rem, 5vw, 2rem）。
  border: 2px solid blue;
  animation: reveal_anim 1sforwards;
  animation-delay: 500ms;
  opacity: 0;

}

@keyframes reveal_anim {
  0% {
    transform: translateX（50%）。
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateX（0%）。
    opacity: 1;
  }
}

<! -- Start Hero Section -->
<section id="hero">/span>
  <div class=" hero container">
    <div class="hero-text">/span>
      <h1><span>/span>你好。 ...</span><br> 
        <span>我們是< /span><br>
        <span>J.P.Astronomics</span>/span>
      </h1>/span>
      < a href="#"/span> type="button" class="cta"> Portfolio</a>。
    </div>/span>
  </div>/span>
</section>/span>
<!--結束英雄部分-->

<!--開始天文目標-->
<section id="service"/span>>
  <div class="服務容器">/span>
    <div class="servivce-top">
      <h1 class="section-title"/span>> 天文目標</h1>。
    </div>/span>
  </div>/span>
</section>/span>
<!--結束天文目標-->/span>

很抱歉對HTML做了一些改動。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/321021.html

標籤：

上一篇：web全堆疊后臺權限管理系統（VUE+ElementUi+nodeJs+koa2）

下一篇：試圖在React中映射物件的陣列，回傳未定義。