Chủ đề nổi bật
03/08/2018, 09:41

Bài 04: Học CSS3 - Các thuộc tính Backgrounds

Trong CSS3 hỗ trợ thêm một số tính năng mới để xử lý background, đó là những thuộc tính xử lý nâng cao hơn thuộc tính background thông thường. ...

Trong CSS3 hỗ trợ thêm một số tính năng mới để xử lý background, đó là những thuộc tính xử lý nâng cao hơn thuộc tính background thông thường.

Bình thường nếu muốn có hai background nằm đè nhau thì ta phải sử dụng hai thẻ HTML, nhưng với CSS3 thì nó hỗ trợ multiple background (đa backgrouds).

Chúng ta sẽ học những thuộc tính sau:

  • background-size
  • background-origin
  • background-clip
  • background-image
  • background

1. CSS3 Multiple backgrouds

CSS3 cho phép thêm nhiều backgrounds cho một thẻ HTML bằng cách sử dụng thuộc tính background-image. 

Nếu cú pháp của thuộc tính background là:

background : url(link-to-file.png)

Thì cú pháp của multiple background là:

background : 
    url(link-to-file1.png),
    url(link-to-file2.png)
    ...;

Lúc này để thiết lập các thuộc tính cho từng image thì ta sử dụng cấu trúc như sau:

background-position: top left, right bottom;
background-repeat: no-repeat, no-repeat

Nghĩa là dùng dấu phẩy để thiết lập cho từng background tương ứng ở trên.

Ví dụ: XEM DEMO

div
{
    awidth: 620px;
    height: 350px;
    background-image: 
            url(https://code24h.com/upload/tut_post/images/2015/10/23/478/house.png), 
            url(https://code24h.com/upload/tut_post/images/2015/10/23/478/background.jpg);
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat
}

Kết quả:

Nếu bạn cảm thấy code trên dài dòng quá thì có thể sử dụng thuộc tính backgroud như ví dụ sau:

div
    {
        awidth: 620px;
        height: 350px;
        background: 
                url(https://code24h.com/upload/tut_post/images/2015/10/23/478/house.png) no-repeat center center, 
                url(https://code24h.com/upload/tut_post/images/2015/10/23/478/background.jpg)  no-repeat center center;
    }

Thay vài code CSS trên bạn sẽ thấy kết quả như nhau.

2. Cấu hình kích thước cho background (background-size)

Thường thì chúng ta không thể thay đổi kích thước của background được nhưng với CSS3 thì hoàn toàn có thể bằng cách sử dụng thuộc tính background-size.

Ví dụ: XEM DEMO

div
{
    awidth: 620px;
    height: 350px;
    background: 
            url(https://code24h.com/upload/tut_post/images/2015/10/23/478/house.png) no-repeat center center, 
            url(https://code24h.com/upload/tut_post/images/2015/10/23/478/background.jpg)  no-repeat center center;
    background-size: 200px 200px, 300px 300px;
}

Kết quả:

Nếu chúng ta thiết lập kích thước cố định cho background như vậy thì không thể chạy tốt trong thiết kế responsive được vì responsive co giãn nên không có định chiều cao và chiều rộng. Lúc này ta sẽ lựa chọn sử dụng hai giá trị chuẩn sau đây:

  • contain: background sẽ có tác dụng như thẻ img, nghĩa là nó sẽ co giãn theo chiều rộng và chiều cao theo đúng tỉ lệ của hình ảnh.
  • cover: Nếu chiều rộng và chiều cao của thẻ HTML lớn hơn hình ảnh thì nó sẽ giãn ra (full)

Ví dụ cover: XEM DEMO

div
{
    awidth: 800px;
    height: 800px;
    background: 
            url(https://code24h.com/upload/tut_post/images/2015/10/23/478/background.jpg)  no-repeat center center;
    background-size: cover;
}

Trong ví dụ này vì thẻ HTML lớn nên hình background nó kéo giãn ra cho khớp.

Ví dụ contain: XEM DEMO

div
{
    awidth: 800px;
    height: 100px;
    border: solid 1px;
    background: 
            url(https://code24h.com/upload/tut_post/images/2015/10/23/478/background.jpg)  no-repeat center center;
    background-size: contain;
}

Trong ví dụ này thẻ HTML có chiều rộng dài và chiêu cao ngắn nên hình nó sẽ fix theo chiều cao, vì vậy chiều cao full mà chiều rộng thì không full.

3. Thuộc tính background-origin trong CSS3

Thuộc tính background-origin trong CSS3 dùng để xác đinh nơi mà background hình ảnh sẽ hiển thị. Nó có ba giá trị sau đây:

  • border-box: biên của background tính luôn border ngoài cùng
  • padding-box: biên của background tính từ vị trí padding (sát lề border)
  • content-box: biên của backgroudn tính từ vị trí có thể sử dụng

Xem hình mô tả sau để dễ hiểu hơn.

Ví dụ: XEM DEMO

div{
   awidth: 250px;
   height: 100px;
   margin: 20px auto;
   border: solid 20px;
   padding: 50px;
   background: url(https://code24h.com/upload/tut_post/images/2015/10/23/478/hoa-hong-dep.gif) no-repeat top left;
}

#div1{
    background-origin: border-box;
}

#div2{
    background-origin: padding-box;
}

#div3{
    background-origin: content-box;
}

4. Thuộc tính background-clip trong CSS3

Thuộc tính backgroud-clip trong CSS3 dùng để xác định nơi mà background color sẽ hiển thị. Nó có ba giá trị sau:

  • border-box: biên của background tính luôn border ngoài cùng
  • padding-box: biên của background tính từ vị trí padding (sát lề border)
  • content-box: biên của backgroudn tính từ vị trí có thể sử dụng

Như vậy công dụng của nó tương tự như background-origin nhưng nó có tác dụng với background color còn background-origin thì có tác dụng với background image.

Ví dụ: XEM DEMO

div{
   awidth: 250px;
   height: 100px;
   margin: 20px auto;
   border: dotted 10px;
   padding: 50px;
   background: blue;
}

#div1{
    background-clip: border-box;
}

#div2{
    background-clip: padding-box;
}

#div3{
    background-clip: content-box;
}

5. Lời kết

Việc xử lý multiple background là một tính năng khá hay trong CSS3 bởi nó giải quyết được vấn đề bổ sung thẻ HTML để tạo background. Bên cạnh đó các thuộc tính như background-origin và backgroud-clip cũng giúp cho coder có nhiều sự lựa chọn hơn.

Một ngày không xa chúng ta sẽ gặp lại những thuộc tính này.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

CSS căn bản

BÀI KẾ SAU BÀI KẾ TIẾP

CSS Responsive Web Design

Xin giới thiệu với các bạn series tự học CSS Responsive, đây là một series tự mình biên soạn và viết theo khả năng của mình. Trong series này mình sẽ giới thiệu tất cả các kiến thức cần thiết để học responsive, từ cách sử dụng media cho đến Javascript và từ đó sẽ đưa ra một bài tập nho nhỏ để tự ...

CSS3 căn bản

BÀI KẾ SAU BÀI KẾ TIẾP

Tạo hiệu ứng HTML5&CSS3

DANH SÁCH BÀI HỌC Hiệu ứng bóng đổ với thuộc tính box-shadow của CSS3

Bài 10: Học CSS3 - 2D Transforms

CSS3 2D Transforms là những thuộc tính dùng để xử lý hiệu ứng di chuyển 2D ( không gian hai chiều ), ví dụ bạn có thể dụng CSS3 để quay một thẻ ...

Bài 09: Học CSS3 - Sử dụng @fonf-face

Trước đây nếu bạn muốn website chạy những font chữ độc và lạ mà trên máy tính của Client không cài đặt thì đó là điều không thể, trừ khi client ...

Bài 07: Học CSS3 - Text Shadow - Box Shadow

Thêm một sự bất ngờ nữa dành cho những bạn yêu mến lập trình CSS3 đó là tạo hiệu ứng shadow mà chỉ có CSS3 mới làm được. Với CSS3 bạn có thể ...

Bài 08: Học CSS3 - Xử lý Text

CS3 hỗ trợ một số thuộc tính giúp việc xử lý text hiệu quả hơn. Nếu trước đây chúng ta gặp khó khăn trong việc xử lý một từ quá dài và bị tràn ...

Bài 05: Học CSS3 - Định dạng màu sắc

CSS3 hỗ trợ nhận diện color bằng tên màu , mã hexadecimal và mã RGB . Trong bài này chúng ta sẽ tìm hiểu một số định dạng mã màu thường sử ...

Bài 06: Học CSS3 - Gradient Background

Trong Photoshop bạn có thể tạo một hình ảnh với nhiều màu sắc và chúng trộn lẫn với nhau nhìn rất bắt mắt như hình dưới đây. Thì bạn hoàn ...