Hướng dẫn CSS này giải thích cách sử dụng thuộc tính CSS có tên là thuộc tính vị trí nền với cú pháp và ví dụ
Sự miêu tả
Thuộc tính vị trí nền CSS xác định vị trí ban đầu của hình nền cho một phần tử
cú pháp
Cú pháp cho thuộc tính CSS vị trí nền là
background-position: horizontal_value [vertical_value];Tham số hoặc Đối số
ngang_giá_trịXác định vị trí nằm ngang của hình nền. Nó có thể là một trong những điều sau đây
Giá trịMô tảcố địnhGiá trị cố định được biểu thị bằng px, em,
div { hình nền. url("logo. png"); vị trí nền. 0px 10px;
div { hình nền. url("logo. png"); vị trí nền. 25% 50%; . Tương đương với 0% cho vị trí nằm ngang
div { hình nền. url("logo. png"); vị trí nền. trên bên trái; . Tương đương 50% cho vị trí nằm ngang
div { hình nền. url("logo. png"); vị trí nền. đỉnh trung tâm; . Tương đương 100% cho vị trí nằm ngang
div { hình nền. url("logo. png"); vị trí nền. trên cùng bên phải;
div { hình nền. url("logo. png"); vị trí nền. thừa kế;
Không bắt buộc. Nó xác định vị trí thẳng đứng của hình nền. Nó có thể là một trong những điều sau đây
Giá trịMô tảcố địnhGiá trị cố định được biểu thị bằng px, em,
div { hình nền. url("logo. png"); vị trí nền. 25px 30px;
div { hình nền. url("logo. png"); vị trí nền. 10% 25%; . Tương đương với 0% cho vị trí thẳng đứng
div { hình nền. url("logo. png"); vị trí nền. trên bên trái; . Tương đương với 50% cho vị trí thẳng đứng
div { hình nền. url("logo. png"); vị trí nền. trung tâm bên trái; . Tương đương 100% cho vị trí thẳng đứng
div { hình nền. url("logo. png"); vị trí nền. phía dưới bên trái;
div { hình nền. url("logo. png"); vị trí nền. thừa kế;
Ghi chú
- Giá trị đầu tiên biểu thị vị trí nằm ngang của hình nền và giá trị thứ hai biểu thị vị trí thẳng đứng của hình nền
- Nếu không có vertical_value nào được cung cấp, thuộc tính vị trí nền CSS sẽ cho rằng vertical_value là trung tâm
tính tương thích của trình duyệt web
Thuộc tính vị trí nền CSS có hỗ trợ cơ bản với các trình duyệt sau
- Trình duyệt Chrome
- Firefox (Tắc kè)
- Internet Explorer (IE)
- Ô-pê-ra
- Safari (WebKit)
Thí dụ
Chúng ta sẽ thảo luận về thuộc tính vị trí nền bên dưới, khám phá các ví dụ về cách sử dụng thuộc tính này trong CSS
Sử dụng cố định
Hãy xem ví dụ về vị trí nền CSS nơi chúng tôi sử dụng một giá trị cố định
div { background-image: url("/images/logo.png"); background-position: 0px 45px; }Trong ví dụ vị trí nền CSS này, chúng tôi đã đặt hình nền cho
gắn thẻ bằng logo3. tập tin png. Sau đó, chúng tôi đã đặt hình ảnh được căn trái theo chiều ngang và căn trên cùng theo chiều dọc. Nếu logo3. hình ảnh png không có sẵn,
vẫn sẽ hiển thị màu nền xanh lam
Trong đoạn mã này, bạn sẽ học cách căn giữa một hình nền trong một
yếu tố. Tất nhiên, bạn cần thuộc tính CSS. Đặc biệt, điều này có thể thực hiện được với sự trợ giúp của thuộc tính nền và kích thước nền. Dưới đây bạn có thể thấy cách các thuộc tính này được sử dụng để đạt được mục tiêu của chúng tôi
Trong ví dụ của chúng tôi dưới đây, chúng tôi sử dụng một
phần tử và đặt cho nó một thuộc tính lớp, sau đó tạo kiểu cho lớp trong phần CSS. Bạn cần chỉ định vị trí của hình ảnh thông qua giá trị "trung tâm" của thuộc tính tốc ký nền. Đặt chiều rộng của hình ảnh của bạn thành "100%". Trong ví dụ này, chúng tôi cũng chỉ định chiều cao và kích thước nền của hình ảnh của chúng tôi
Title of the document
Kết quả
Nếu bạn muốn căn giữa hình nền của mình bên trong một
phần tử và hiển thị toàn bộ hình ảnh mà không có bất kỳ phần nào của nó bị cắt bớt hoặc kéo dài, hãy thử ví dụ sau, trong đó chúng tôi đặt thuộc tính kích thước nền thành giá trị "chứa" của nó
Title of the document
Ví dụ cuối cùng của chúng tôi minh họa cách bạn có thể điền vào toàn bộ
phần tử với hình nền và không để thừa khoảng trống. Bạn chỉ cần sử dụng giá trị “cover” của thuộc tính background-size
Title of the document
This is some example.