Căn Chỉnh Background Image Html, 9 Cách Sử Dụng Background (Nền) Trong Css

Màu nền

Thiết lập màu nền cho phần tử dùng thuộc tính CSS background-color chỉ ra giá trị màu theo tên, hoặc theo mã hex, hoặc theo trộn rgb

Ví dụ về màu nền #41c04d

Ví dụ về màu nền rgb(135,206,235)

Ví dụ về màu nền coral

Ví dụ về màu nền #41c04d

Ví dụ về màu nền rgb(135,206,235)

Ví dụ về màu nền coral

Ảnh nền

Thuộc tính background-image dùng để chỉ ra ảnh (địa chỉ url hoặc vị trí tương đối) được dùng làm nền cho phần tử.

Mặc định thuộc tính background-image lặp lại ảnh nền theo cả chiều đứng và ngang

Ví dụ bạn có url ảnh là: https://cdn2.iconfinder.com/data/icons/humano2/48×48/actions/gtk-orientation-landscape.png

*

Dùng ảnh đó làm nền cho một phần tử div như ví dụ:

Đang xem: Căn chỉnh background image html

Ví dụ về ảnh nền với background-image

Phần tử được tô bởi background-color rồi đên background-image

Ví dụ về ảnh nền với background-image

Ví dụ về ảnh nền với background-image

Phần tử được tô bởi background-color rồi đên background-image

Ví dụ về ảnh nền với background-image

Để chỉ ra nhiều ảnh nền trong thành phần url() chỉ ra nhiều url ảnh cách nhau bởi dấu phảy ,

Lặp lại ảnh nền

Mặc định ảnh nền lặp lại theo cả chiều x và chiều y. Với thuộc tính thêm background-repeat bạn có thể điều khiển tính lặp lại này, bằng các giá trị

repeat lặp lại theo x, y repeat-x lặp theo chiều x repeat-y lặp theo chiều y no-repeat không lặp inherit kế thừa cha

Ví dụ về ảnh nền với background-image

Phần tử được tô bởi background-color rồi đên background-image

Ví dụ về ảnh nền với background-image

Ví dụ về ảnh nền với background-image

Phần tử được tô bởi background-color rồi đên background-image

Ví dụ về ảnh nền với background-image

background-attachment

Thuộc tính background-attachment để điều khiển xem ảnh nền là cố định trong phần tử hoặc cuộn theo trang. Với các giá trị như fixed nền không cuộn theo phần tử, scroll cuộn theo

Ví dụ sau khi cuộn trang, phần tử di chuyển nhưng ảnh nền không di chuyển theo

Ví dụ về ảnh nền với background-image

Phần tử được tô bởi background-color rồi đên background-image

Ví dụ về ảnh nền với background-image

Ví dụ về ảnh nền với background-image

Phần tử được tô bởi background-color rồi đên background-image

Ví dụ về ảnh nền với background-image

Xem thêm: Bệnh Nhân Ung Thư Có Nên Ăn Yến Hay Không? Người Mắc Ung Thư Phổi Có Ăn Yến Được Không

Mục lục bài viết
Màu nềnẢnh nền
Đăng ký theo dõi ủng hộ kênh

*

Các đơn vị px em rem mm đo độ dài trong CSS Sử dụng thuộc tính filter trong CSS Sử dụng flexbox bố cục trang trong CSS jQuery và CSS class Hiệu ứng chuyển động trong CSS3 Kích thước rộng cao phần tử HTML trong CSS Đường viền border trong CSS Hiểu về mô hình hộp Box CSS Định dạng các khoảng trắng CSS word white letter-spacing Đổ bóng text-shadow và chuyển chữ text-transform CSS
width, height (Bài trước)
(Bài tiếp) Kiểu danh sách list

Xem thêm: Hướng Dẫn Sửa Lỗi Drum Máy In Brother ! “Toàn Tập”, Máy In Brother Báo Lỗi Drum Cách Khắc Phục

Giới thiệuPrivacyTừ điển Anh – ViệtChạy SQLRegExpCubic-bezierUnix timestampKý tự HTMLcalories, chỉ số BMRchỉ số khối cơ thể BMITạo QR CodeLịch vạn niên Liên hệ RSS

Đây là blog cá nhân, tôi ghi chép và chia sẻ những gì tôi học được ở đây về kiến thức lập trình PHP, Java, JavaScript, Android, C# … và các kiến thức công nghệ khácDeveloped by in4tintuc.com

Leave a Comment