Multi Background trong CSS

Thuộc tính Multi Background trong CSS Thuộc tính Multi Background trong CSS được sử dụng để thêm một hoặc nhiều hình ảnh tại một thời điểm mà không cần sử dụng HTML code. Bạn có thể thêm các hình ảnh mỗi khi cần đến. Cú pháp đơn giản của Multi Background giống như sau: #multibackground { ...

Thuộc tính Multi Background trong CSS

Thuộc tính Multi Background trong CSS được sử dụng để thêm một hoặc nhiều hình ảnh tại một thời điểm mà không cần sử dụng HTML code. Bạn có thể thêm các hình ảnh mỗi khi cần đến. Cú pháp đơn giản của Multi Background giống như sau:

#multibackground {
   background-image: url(../css/images/logo.png), url(../css/images/border.png);
   background-position: left top, left top;
   background-repeat: no-repeat, repeat;
   padding: 75px;
}

Bảng dưới liệt kê các giá trị thường được sử dụng:

Giá trị Miêu tả
background Thiết lập tất cả các thuộc tính về background
background-clip Khai báo một khu vực dành để Painting trong Background
background-image Xác định Background Image
background-origin Xác định vị trí của Background Image
background-size Xác định kích cỡ của Background Image

Ví dụ

Ví dụ sau minh họa cách thiết lập nhiều hình ảnh trên cùng một nền trong CSS:

<html>
   <head>
   
      <style>
         #multibackground {
            background-image: url(../css/images/logo.png), url(../css/images/border.png);
            background-position: left top, left top;
            background-repeat: no-repeat, repeat;
            padding: 75px;
         }
      </style>
      
   </head>
   <body>
   
      <div id="multibackground">
         <h1>www.tutorialspoint.com</h1>
         <p>Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi 
      kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau 
      ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.</p>
      </div>
      
   </body>
</html> 

Kết quả là:−

Kích cỡ của Multi Background trong CSS

Bạn có thể xác định các kích cỡ khác nhau cho các hình ảnh khác nhau được sử dụng trên một nền bởi sử dụng thuộc tính background-size. Cú pháp như sau:

#multibackground {
   background: url(../css/imalges/logo.png) left top no-repeat, url(../css/images/boarder.png) right bottom no-repeat, url(../css/images/css.gif) left top repeat;
   background-size: 50px, 130px, auto;
}

Như trong ví dụ trên, mỗi hình ảnh sẽ có kích cỡ cụ thể tương ứng là 50px, 130px và tự động.

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại code24h.com:

Bài liên quan

Lưu ý về background và định dạng văn bản trong CSS

CSS sử dụng thì khá dễ nhưng để dùng như thế nào cho đúng chuẩn, đúng ý đồ, mục đích và sao cho tối ưu nhất thì quả thật là không dễ dàng chút nào. Bài hôm nay sẽ cho bạn một vài điều cần chú ý để giúp bạn định dạng CSS hiệu quả hơn áp dụng vào định dạng CSS trong văn bản. 1. Vị trí: Đầu ...

Vũ Văn Thanh viết 2 tuần trước

Thuộc tính Background trong CSS

Các thuộc tính background trong CSS được sử dụng để xác định các hiệu ứng nền cho các phần tử. Thuộc tính background của CSS: background-color background-image background-repeat background-attachment background-position Màu nền Thuộc tính ...

Vũ Văn Thanh viết 14:33 ngày 07/09/2018

Thuộc tính background trong CSS

Cú pháp CSS Selector là gì? Tìm hiểu về Selector trong CSS Thuộc tính định dạng văn bản trong CSS Thuộc tính thẻ a trong CSS Hướng dẫn thiết lập màu nền với CSS background, sử dụng các thuộc tính background với hình ảnh và màu sắc như background-color, background image… Ở ...

Trần Trung Dũng viết 17:23 ngày 04/09/2018

Các thuộc tính định dạng BACKGROUND trong CSS

Thuộc tính background dùng để định dạng nền cho phần tử HTML. Dưới đây là một số thuộc tính background: background-color (thiết lập màu nền) background-image (thiết lập hình nền) background-repeat (thiết lập sự lặp lại của hình nền) background-attachment (thiết lập vị trí cố định ...

Trịnh Tiến Mạnh viết 10:45 ngày 18/08/2018

Multi Background trong CSS

Thuộc tính Multi Background trong CSS Thuộc tính Multi Background trong CSS được sử dụng để thêm một hoặc nhiều hình ảnh tại một thời điểm mà không cần sử dụng HTML code. Bạn có thể thêm các hình ảnh mỗi khi cần đến. Cú pháp đơn giản của Multi Background giống như sau: #multibackground { ...

Tạ Quốc Bảo viết 12:24 ngày 14/08/2018
0