วิธีที่จะสร้าง: ภาพฮีโร่

วิธีที่จะสร้างภาพฮีโร่

ขั้นที่ 1 - เพิ่ม HTML:

<div class="hero-image">
  <div class="hero-text">
    <h1>ฉันคือ Bill Gates</h1>
    <p>และฉันเป็นนักถ่ายภาพ</p>
    <button>จ้างฉัน</button>
  </div>
</div>

ขั้นที่ 2 - เพิ่ม CSS:

body, html {
    height: 100%;
{}
/* ภาพฮีโร่ */
.hero-image {
  /* ใช้ "linear-gradient" เพื่อเพิ่มภาพสีมืดบริเวณหลังภาพ (photographer.jpg) ซึ่งทำให้ข้อความง่ายต่อการอ่าน */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");
  /* ตั้งความสูงเฉพาะ */
  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: ย้ายตำแหน่ง(-50%, -50%);
  color: white;
{}

亲自试一试