background

Tìm hiểu cách thêm màu vào các thành phần CSS của bạn bằng cách sử dụng mã màu Hex, giá trị RGB và HSL.

Màu nền CSS

Trong hướng dẫn này, chúng tôi sẽ đề cập đến những điều cơ bản về việc thêm màu nền bằng CSS cho các phần tử có chiều rộng cố định và biến đổi. Như một phần thưởng, chúng tôi cũng sẽ minh họa cách tạo ra những hình vuông màu sắc phản hồi hoàn hảo chỉ với vài dòng mã!

Màu nền của thẻ Body

Trong CSS, nền được coi là chiều rộng và chiều cao của một phần tử, cộng với bất kỳ khoảng đệm và viền nào (nhưng không bao gồm lề). Sử dụng thuộc tính background-color của CSS, chúng ta có thể tô màu nền của thẻ <body> trong trang HTML của mình thành màu đỏ.

html

<head>
  <style>
    body { background-color: #FF0000; }
  </style>
</head>
<body>
</body>

Khá đơn giản, phải không! Tất nhiên, bạn cũng có thể sử dụng một ID hoặc lớp để gán màu nền cho phần tử <body>, nhưng đây là phương pháp dễ nhất. Tiếp theo, chúng ta sẽ xem xét một vài kỹ thuật để tô màu nền cho các phần tử trong trang như <div>.

Màu nền của phần tử kích thước cố định

Đối với các phần tử HTML có kích thước cố định - cho dù là pixel, em hay phần trăm - việc thêm màu nền là rất dễ dàng. Chúng ta có thể đơn giản sử dụng mã CSS từ bước trước để gán màu nền xanh cho <div> có chiều rộng và chiều cao cố định.

html

<head>
  <style>
    div {
      width: 50%;
      height: 200px;
      background-color: #00FF00;
    }
  </style>
</head>
<body>
  <div></div>
</body>

Tuy nhiên, nếu chúng ta xóa chiều cao hoặc chiều rộng khỏi mã CSS, màu nền sẽ biến mất. Hãy thử nghiệm điều này trong bản demo.

Màu nền của phần tử kích thước biến đổi

Được rồi, tuyệt vời, nhưng nếu chúng ta không biết kích thước của phần tử HTML? Miễn là có một phần tử bên trong phần tử mà bạn muốn thêm màu nền, chúng ta có thể sử dụng thuộc tính padding của CSS để gán màu cho phần tử bên ngoài.

html

<head>
  <style>
    div {
      padding: 16px;
      background-color: #00FF00;
    }
  </style>
</head>
<body>
  <div>
    <h1>Tiêu đề với màu nền</h1>
  </div>
</body>

Hình vuông màu sắc phản hồi

Kỹ thuật này sử dụng sự kết hợp giữa định vị và chiều rộng cố định với khoảng đệm để tạo ra một hình vuông phản hồi hoàn hảo với màu nền. Bạn thực sự có thể tạo ra các hình chữ nhật với bất kỳ tỷ lệ nào chỉ bằng cách thay đổi thuộc tính padding-bottom của CSS.

html

<head>
  <style>
    .outer {
      position: relative;
      width: 25%;
      padding-bottom: 25%;
    }
    .inner {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #00FF00;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
</body>
Chia sẻ với bạn bè của bạn!
  • Tweet
  • Post
  • LinkedIn
  • Reddit