Xem Nhiều 10/2022 ❤️️ Cách Sử Dụng Thuộc Tính Background ❣️ Top Trend | Bothankankanhatban.com

Xem Nhiều 10/2022 ❤️ Cách Sử Dụng Thuộc Tính Background ❣️ Top Trend

Xem 6,930

Cập nhật thông tin chi tiết về Cách Sử Dụng Thuộc Tính Background mới nhất ngày 01/10/2022 trên website Bothankankanhatban.com. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất. Cho đến thời điểm hiện tại, bài viết này đã đạt được 6,930 lượt xem.

Thiết Lập Hình Nền Trong Css

Website Xem Phim Kiếm Tiền Như Thế Nào ?

Thiết Kế Website Rao Vặt Chuyên Nghiệp, Web Đăng Tin Mua Bán

Thiết Kế Website Rao Vặt: Những Điểm Quan Trọng Nhất Để Thiết Kế Hiệu Quả

Thiết Kế Website Rao Vặt, Đăng Tin Đầy Đủ Tính Năng Theo Yêu Cầu

1) Thuộc tính background-image trong CSS

– Thuộc tính background-image dùng để thiết lập “hình nền” cho phần tử.

– Ví dụ:

Phần tử này có nền là hình các bông hoa

– Lưu ý: Đối với một phần tử HTML, phần diện tích được thiết lập hình nền sẽ bao gồm các thành phần:

border.

padding.

content.

(không bao gồm phần margin)

2) Cách sử dụng thuộc tính background-image trong CSS

– Để sử dụng thuộc tính background-image, ta dùng cú pháp như sau:

– Ta thấy giá trị của thuộc tính background-image có thể được xác định bởi một trong bốn loại:

url()

– Xác định đường dẫn đến một tập tin hình ảnh cụ thể mà bạn muốn dùng để làm hình nền cho phần tử.

(Đường dẫn ở đây có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối)

Xem ví dụ

none

– Xác định việc “không thiết lập hình nền cho phần tử”

– Giá trị này thường được sử dụng để ghi đè lên khi ban đầu phần tử đã được thiết lập hình nền.

Xem ví dụ

initial

– Sử dụng giá trị mặc định của nó.

(Mặc định thì phần tử không có hình nền, hay nói cách khác là trong suốt)

Xem ví dụ

inherit

– Kế thừa giá trị thuộc tính background-image từ phần tử cha của nó

Xem ví dụ

3) Một số kỹ thuật cần quan tâm

– Chúng ta có hai kỹ thuật dùng để thiết lập hình nền cho phần tử cần phải quan tâm:

Thứ nhất: Sử dụng nhiều hình ảnh để thiết lập hình nền cho phần tử.

Thứ hai: Hình nền kết hợp với màu nền.

3.1) Sử dụng nhiều hình ảnh để thiết lập hình nền cho phần tử

– Việc thiết lập hình nền cho phần tử không phải chỉ có thể sử dụng duy nhất một tấm hình, ta có thể dùng nhiều tấm hình bằng cách sử dụng nhiều giá trị url() (tấm hình nào được khai báo trước thì nó sẽ nằm đè lên tấm hình sau)

Ví dụ:

body{

background-image: url(../image/tree.png), url(../image/flower.gif);

}

Xem ví dụ

– Lưu ý: Việc sử dụng nhiều tấm hình để thiết lập hình nền cho phần tử chỉ thích hợp khi các tấm hình đó thuộc định dạng GIF hoặc PNG (loại hình ảnh mà có một số vị trí trong suốt). Nếu sử dụng loại hình không có phần trong suốt thì nó sẽ nằm đè hoàn toàn lên tấm hình bên dưới, khiến tấm hình bên dưới không được hiển thị.

Ví dụ:

body{

background-image: url(../image/pic1.jpg), url(../image/pic2.jpg);

}

Xem ví dụ

3.2) Hình nền kết hợp với màu nền

– Nếu bạn thiết lập hình nền cho phần tử bằng loại hình ảnh có một số vị trí trong suốt, thì khi đó bạn có thể sử dụng kết hợp với thuộc tính background-color để chèn màu nền vào những vị trí trong suốt, làm tăng tính sắc sảo cho nền của phần tử.

Ví dụ:

p{

border:1px solid gray;

padding:180px 50px;

font-size:30px;

background-image:url(../image/flower.gif);

background-color:#eee;

}

Xem ví dụ

4) Giới thiệu sơ qua về “sự lặp lại của hình nền”

– Mặc định, hình nền sẽ xuất phát từ vị trí góc “phía trên – bên trái” của phần tử.

– Nếu hình ảnh dùng để làm hình nền cho phần tử có kích thước nhỏ hơn kích thước của phần tử thì hình nền sẽ tự động được lặp lại để lấp đầy diện tích của phần tử (Xem ví dụ)

– Chúng ta có thể thiết lập việc lặp lại của hình nền (lặp, không lặp, chỉ lặp theo chiều ngang, chỉ lặp theo chiều dọc, …) bằng cách sử dụng thuộc tính background-repeat trong CSS.

12 Cách Cài Đặt Rss Feed Cho WordPress

Series Tạo App Mobile Cho Website WordPress

Lập Trang Blog Cá Nhân Riêng

Top 3 Cách Tạo Website Cá Nhân Miễn Phí Cho Người Không Biết Code

Cách Chuyển Vùng Tài Khoản Apple Sang Mỹ, Canada, Đài Loan Và Ngược Lại

Bạn đang xem bài viết Cách Sử Dụng Thuộc Tính Background trên website Bothankankanhatban.com. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Chúc bạn một ngày tốt lành!

Yêu thích 1835 / Xu hướng 1935 / Tổng 2035 thumb
🌟 Home
🌟 Top