CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

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.

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).

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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ụ RUN
div
{
    width: 620px;
    height: 350px;
    background-image: 
            url(https://freetuts.net/upload/tut_post/images/2015/10/23/478/house.png), 
            url(https://freetuts.net/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ả:

multiple background png

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
    {
        width: 620px;
        height: 350px;
        background: 
                url(https://freetuts.net/upload/tut_post/images/2015/10/23/478/house.png) no-repeat center center, 
                url(https://freetuts.net/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
{
    width: 620px;
    height: 350px;
    background: 
            url(https://freetuts.net/upload/tut_post/images/2015/10/23/478/house.png) no-repeat center center, 
            url(https://freetuts.net/upload/tut_post/images/2015/10/23/478/background.jpg)  no-repeat center center;
    background-size: 200px 200px, 300px 300px;
}

Kết quả:

background size png

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:

Ví dụ RUN
div
{
    width: 800px;
    height: 800px;
    background: 
            url(https://freetuts.net/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:

Ví dụ RUN
div
{
    width: 800px;
    height: 100px;
    border: solid 1px;
    background: 
            url(https://freetuts.net/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.

image origin png

Ví dụ RUN
div{
   width: 250px;
   height: 100px;
   margin: 20px auto;
   border: solid 20px;
   padding: 50px;
   background: url(https://freetuts.net/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ụ RUN
div{
   width: 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-originbackgroud-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.

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top