Thuộc tính background trong CSS3

Background là một phần không thể thiếu được trong những trang web, và bài này thì ngoài những thuộc tính background trong CSS mà mình đã giới thiệu với mọi người thì mình sẽ bổ sung những thuộc tính tác động đến background trong CSS3.

1, Thuộc tính background-blend-mode.

-Thuộc tính background-blend-mode trong CSS3 có tác dụng thiết lặp chế độ hòa trộn của môi lớp layer.

Cú pháp:

background-blend-mode: value;

Trong đó: value là một trong các giá trị (click vào link để xem ví dụ).

normal - Đây là giá trị mặc định, thiết lập chế độ bình thường.
multiply - Thiết lập chế độ nhân.
screen - Thiết lập chế độ screen.
overlay - Thiết lập chế độ overlay.
darken -Thiết lập chế độ draken.
lighten - Thiêt lập chế độ lighten.
color-dodge - Thiêt lập chế độ dodge.
saturation - Thiêt lập chế độ saturation .
color- Thiêt lập chế độ color.
luminosity- Thiêt lập chế độ luminosity.

2, Thuộc tính back-ground-clip.

-Thuộc tính background-clip có tác dụng chỉ định vùng hoạt động của nền.

Cú Pháp:

background-clip: value;

Trong đó: value là một trong các giá trị sau (click vào link để xem ví dụ)

border-box - Đây là giá trị mặc định. Xác định vùng background được cắt bớt theo vùng chứa border.
content-box - Xác định vùng background được cắt theo vùng nội dung.
padding-box - Xác định vùng background được cắt theo vùng padding.
initial - Xác định lại giá trị mặc định cho thuộc tính.
inherit - Kế thừa thuộc tính từ lớp cha.

3, Thuộc tính background-origin.

-Thuộc tính background-origin có tác dụng xác định vị trí hiển thị của background.

Cú Pháp:

background-origin: value;

Trong đó:

padding-box - Xác định giá trị tương đối theo vùng chứa padding.

border-box - Xác định giá trị tương đối theo vùng chứa border

content-box - Xác định giá trị tương đối theo vùng chứa nội dung

initial - Xác định lại giá trị mặc định cho thuộc tính.

inherit - Kế thừa thuộc tính từ lớp cha.

4, Thuộc tính background-size.

-Thuộc tính background-size trong CSS3 có tác dụng xác định kích cỡ cho background.

Cú pháp:

background-size: keyword;

hoặc

background: width heigt;

Trong đó:

keyword là một trong các giá trị sau (click vào link để xem ví dụ):
- auto - Đây là giá trị mặc định. xem demo
- cover - Xác định giá trị auto theo nội dung. xem demo
- contain - Tự chia tỉ lệ đến kích thước phù hợp với nội dung. xem demo
- initial - Thiết lập lại thuộc tính về giá trị mặc định.
- inherit - Kế thừa từ thành phần cha.
width height là các đơn vị đo trong CSS. Nếu như chỉ điền 1 giá trị thì có nghĩa là abnj đang thiết lập chiều rộng còn chiều cao tự auto tỉ lệ theo chiều rộng.

VD: Khi điền 1 giá trị.

.background{
    background: url(https://toidicode.com/upload/images/logo.png);
    background-repeat: no-repeat;
    border:10px dotted #000;
    width: 210px;
    padding: 15px;
    background-size: 100px;
}

Xem Kết Quả

VD: Khi điền 2 giá trị.

.background{
    background: url(https://toidicode.com/upload/images/logo.png);
    background-repeat: no-repeat;
    border:10px dotted #000;
    width: 210px;
    padding: 15px;
    background-size: 100px 200px;
}

Xem Kết Quả