Thuộc tính của background trong css

Trong bài viết trước tinhocdao đã ghi lại kiến thức về Padding, margin và border, bài này tinhocdao sẽ ghi lại các kiến thức liên quan tới background.

Nội dung bài viết

Các thuộc tính của background-image

 background-image: url(điachiurl);
 background-size: 100px;
 background-repeat: no-repeat;
 background-repeat: repeat-x; (lặp lại theo chiều ngang)

Có thể sử dụng nhiều hình ảnh làm background, hình ảnh nào viết trước sẽ nổi ở trên.

Có thể sử dụng background-image: linear-gradient(0, #333, #ccc); tức là giá trị màu thay đổi dần từ màu 333 sang ccc, 0 là hướng xoay từ dưới lên trên, đảo ngược lại là 180deg sẽ xoay từ trên xuống dưới, 90deg sẽ xoay từ trái sang phải.

Kết hợp giữa linear-gradient và hình ảnh để làm background

background-image: linear-gradient(
            0,
            rgba(255, 255, 255, 0.5),
            rgba(0, 0, 255, 0.5)
          ),
          url(địa chỉ url);

Đoạn code trên sử dụng rgba là giá trị màu có các thông số màu red, green, blue, và giá trị cuối cùng là alpha. Alpha sẽ quyết định độ trong suốt của màu.

Để đổi giá trị màu trong chrome bạn kích chuột phải vào trình duyệt và chọn Inspect khi cửa sổ mở ra chọn như hình sau:

Cách để đổi mã màu bằng trình duyệt chrome

Tận dụng tính năng background-reapeat

Tính năng này có thể tận dụng để làm hình nền background lặp đi lặp lại bằng cách search ra hình nền lặp lại: sử dụng từ khóa repeat background stock image hoặc pattern background stock imageđể tìm những ảnh mẫu, sau đó dùng ảnh mẫu này làm background thì sẽ được background repeat

Background-size có thể đặt là 100% để làm ảnh rộng bằng trình duyệt nhưng ngoài ra cũng có thể sử dụng

background-size: contain thuộc tính này sẽ tự động lấy chiều dài nhất của bức ảnh (chiều dọc hoặc chiều ngang) nhưng phải đảm bảo yếu tố không bị che khuất và không bị cắt xén

background-size: cover thuộc tính này cũng lấy bức ảnh theo chiều dài nhất của bức ảnh và chấp nhận bị che khuất và cắt xén ảnh, nó chỉ đảm bảo làm sao để không hở ra khoảng trắng.

Thuộc tính background-clip (áp dụng cho màu nền)

Quyết định màu của background được phủ ra tới đâu. Mặc định là màu được đổ ra tới border (border-box).

Cuối cùng là content box, nó chỉ phủ màu ở trong content

<style>
      div {
        background-color: yellow;
        width: 100px;
        border: 5px dashed red;
        background-clip: content-box;
        padding: 20px;
      }
    </style>

Tiếp theo là chỉ đổ tới padding-box, không phủ ra đường viền.

Thuộc tính background-origin (áp dụng cho ảnh nền)

Background-origin áp dụng để điều khiển phạm vi phủ của ảnh nền, có 3 phạm vi giống như của màu nền là trong content, padding, và cuối cùng là phủ ra cả border

Content-box

Padding-box (đây cũng là giá trị mặc định của background-origin)

div {
        background-image: url(https://cdn.freehost.page/wp-content/uploads/2021/02/z-index.jpg);
        width: 300px;
        border: 5px dashed red;
        background-size: 80px 60px;
        background-repeat: no-repeat;
        padding: 20px;
        background-origin: padding-box;
      }

Border-box

Thuộc tính background-position điều chỉnh vị trí của ảnh nền trong css

Có các vị trí

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

Trong trường hợp nếu chỉ viết một giá trị thì giá trị sau sẽ tự hiểu là center. Cũng có thể viết giá trị là con số cụ thể

vd: background-postion: 50px //sẽ căn từ mép của phần tử chứa nó ra 50px và giá trị thứ hai được hiểu là center.

Trường hợp kết hợp giữa keyword và giá trị tuyệt đối. Vd muốn ảnh ở vị trí bên trên bên trái và lệch xuống dưới 20px thì viết: background-position: top 20px right 20px;

Trường hợp viết gộp code:

background: url(https://tinhocdao.com/image.img) no-repeat 100%;

Việc viết gộp code lại sẽ giúp khi trang web nhanh và nhẹ hơn khi load.