Cách tạo: Hình ảnh anh hùng

Học cách sử dụng CSS để tạo hình ảnh anh hùng.

Hình ảnh anh hùng là hình ảnh lớn có văn bản, thường được đặt ở đầu trang web:

Thử ngay

Cách tạo hình ảnh anh hùng

Bước 1 - Thêm HTML:

<div class="hero-image">
  <div class="hero-text">
    <h1>I am Bill Gates</h1>
    <p>And I'm a Photographer</p>
    <button>Hire me</button>
  </div>
</div>

Bước 2 - Thêm CSS:

body, html {
    height: 100%;
}
/* Hình ảnh anh hùng */
.hero-image {
  /* Sử dụng "linear-gradient" để thêm hiệu ứng nền mờ đen cho hình ảnh (photographer.jpg). Điều này sẽ làm cho văn bản dễ đọc hơn */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");
  /* Đặt chiều cao đặc định */
  height: 50%;
  /* Đặt vị trí và居中 hình ảnh để có thể phóng to tốt trên tất cả các màn hình */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
/* Đặt văn bản ở giữa hình ảnh */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: di chuyển(-50%, -50%);
  màu: trắng;
}

Thử ngay