Trung tâm ảnh nền CSS

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ố

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.