Làm trang post thơ với ảnh nền đơn giản

Để làm 1 trang post thơ, có hiệu ứng ảnh mờ, chìm trong nền bài viết nhằm trang thơ đẹp, truyền cảm hứng cho người đọc, bằng cách đơn giản và dễ thích ứng nhất, ta cần lần lượt thực hiện những bước sau:

1)Tạo 1 file ví dụ là "src/css/tho.scss" có code:

.background-blur {
    position: relative;
    background-image: url('/img/background.jpg'); /* Đường dẫn ảnh nền */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .background-blur::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-overlay); /* Dùng biến màu để phù hợp Light/Dark Mode */
    filter: blur(100px); /* Mờ tối đa */
    z-index: 0; /* Nền nằm dưới chữ */
  }
  
  .text-overlay {
    position: relative;
    z-index: 1; /* Chữ nổi trên nền */
    color: var(--text-color); /* Tự động đổi màu chữ theo chế độ */
    font-weight: bold; 
    padding: 20px;
    line-height: 1.6; /* Tăng khoảng cách dòng giúp dễ đọc hơn */
    text-align: center; /* Căn giữa chữ */
  }
  
  /* Biến màu cho chế độ Light/Dark */
  :root {
    --background-overlay: rgba(255, 255, 255, 0.2); /* Light Mode: Lớp phủ sáng hơn nữa */
    --text-color: #000; /* Light Mode: Chữ đen */
  }
  
  [data-theme="dark"] {
    --background-overlay: rgba(0, 0, 0, 0.2); /* Dark Mode: Lớp phủ tối nhẹ hơn */
    --text-color: #fff; /* Dark Mode: Chữ trắng sáng */
  }

2)Khai báo bằng cách Import giòng code này vào file mặc định của hệ thống (src/css/sources.scss):

@import 'tho.scss';

Bài thơ muốn Post "blog/xxx.md" cần có các giòng code sau:

<div className="background-blur">
<div className="text-overlay">
  <h1>Trang Thơ</h1>
  <p>Khám phá những vần thơ với không gian yên bình...</p>
  <h2>Một chút nhẹ nhàng</h2>
  <blockquote>Giấc mơ vườn xưa rợp bóng cây...</blockquote>
</div>
</div>

Ý nghĩa của các chỉ số set trong file "src/css/tho.scss" như sau:

1. **Ảnh nền:**
    
    - **`filter: blur(12px)`**: Tăng mức mờ để nền gần như chìm hoàn toàn.
    - **`background-overlay`**: Lớp phủ sáng/tối chỉ còn `0.2` để giảm độ tương phản mạnh giữa ảnh và chữ.
2. **Chữ:**
    
    - **Bỏ đậm:** Sử dụng `font-weight: normal` để chữ nhẹ nhàng, không đậm.
    - **Tăng sáng:** Màu chữ `--text-color` được tối ưu để hiển thị rõ nét trong cả Light/Dark Mode.
3. **Tăng khoảng cách dòng:**
    
    - **`line-height: 1.6`** giúp chữ dễ đọc hơn trên các thiết bị và màn hình nhỏ.

Ta có thể điều chỉnh các tham số này để phù hợp với yêu cầu hiển thị bài thơ trên trang!

Ghi chú: file ảnh làm nền "xx.jpg" ta đặt trong "static/img"