Thuộc tính background-position trong CSS cho phép bạn di chuyển hình nền (hoặc gradient) xung quanh trong vùng chứa của nó.
Bạn đang xem : css background image position
Thuộc tính background-position trong CSS cho phép bạn di chuyển hình nền (hoặc gradient ) xung quanh trong thùng chứa của nó.
html {
background-position: 100px 5px;
}
Nó có ba loại giá trị khác nhau:
- Giá trị độ dài (ví dụ:
100px 5px) - Phần trăm (ví dụ:
100% 5%) - Từ khóa (ví dụ:
trên cùng bên phải)
Các giá trị mặc định là 0 0 . Thao tác này sẽ đặt hình nền của bạn ở trên cùng bên trái của vùng chứa.
Giá trị độ dài khá đơn giản: giá trị đầu tiên là vị trí ngang, giá trị thứ hai là vị trí dọc. Vì vậy, 100px 5px sẽ di chuyển hình ảnh 100px sang phải và 5 pixel xuống dưới. Bạn có thể đặt giá trị độ dài bằng px , em hoặc bất kỳ giá trị độ dài CSS nào khác của .
Phần trăm hoạt động hơi khác một chút. Nâng cao năng lực toán học của bạn: di chuyển hình nền theo X% có nghĩa là nó sẽ căn chỉnh điểm X% trong hình ảnh với điểm X% trong vùng chứa. Ví dụ: 50% có nghĩa là nó sẽ căn chỉnh giữa hình ảnh với giữa vùng chứa. 100% có nghĩa là nó sẽ căn chỉnh pixel cuối cùng của hình ảnh với pixel cuối cùng của vùng chứa, v.v.
Từ khóa chỉ là lối tắt cho tỷ lệ phần trăm. trên cùng bên phải dễ nhớ và dễ viết hơn 0 100% và đó là lý do tại sao từ khóa là một thứ. Dưới đây là danh sách của tất cả năm từ khóa và các giá trị tương đương của chúng:
-
top: 0% theo chiều dọc -
right: 100% theo chiều ngang -
bottom : 100% theo chiều dọc -
trái: 0% theo chiều ngang -
center: 50% theo chiều ngang nếu chưa có chiều ngang được xác định. Nếu đúng thì điều này sẽ được áp dụng theo chiều dọc.
Điều thú vị cần lưu ý là không quan trọng thứ tự bạn sử dụng cho các từ khóa: top center giống với center top . Tuy nhiên, bạn chỉ có thể làm điều này nếu bạn chỉ sử dụng từ khóa. center 10% không giống với center 10% .
Bản trình diễn
Bản trình diễn này hiển thị các ví dụ về background-position được đặt với các đơn vị độ dài, tỷ lệ phần trăm và từ khóa.
Khai báo giá trị
Bạn có thể cung cấp cho background-position tối đa bốn giá trị trong các trình duyệt hiện đại:
- Nếu bạn khai báo một giá trị , giá trị đó là phần bù ngang. Trình duyệt đặt độ lệch dọc thành
center. - Khi bạn khai báo hai giá trị , giá trị đầu tiên là độ lệch ngang và giá trị thứ hai là chiều dọc bù đắp.
Mọi thứ trở nên phức tạp hơn một chút khi bạn bắt đầu sử dụng ba hoặc bốn giá trị, nhưng bạn cũng có nhiều quyền kiểm soát hơn đối với vị trí nền của mình. Cú pháp ba hoặc bốn giá trị xen kẽ giữa các từ khóa và các đơn vị độ dài hoặc phần trăm. Bạn có thể sử dụng bất kỳ giá trị từ khóa nào ngoại trừ center trong khai báo background-position ba hoặc bốn giá trị.
Khi bạn chỉ định ba giá trị , trình duyệt sẽ xen giá trị thứ tư “bị thiếu” thành 0. Đây là ví dụ về background-position có ba giá trị:
.three-values {
background-position: bên phải 45px dưới cùng;
}
Điều này định vị hình nền 45px từ bên phải và 0px từ dưới cùng của vùng chứa.
Dưới đây là ví dụ về bốn giá trị background-position :
.four-values {
background-position: bên phải 45px đáy 20px;
}
Điều này đặt hình nền 45px từ bên phải và 20px từ dưới cùng của vùng chứa.
Lưu ý thứ tự của các giá trị trong các ví dụ ở trên: từ khóa theo sau là đơn vị độ dài. background-position ba hoặc bốn giá trị phải tuân theo định dạng đó, với từ khóa đứng trước đơn vị độ dài hoặc phần trăm.
Bản trình diễn
Bản trình diễn này bao gồm các ví dụ về một giá trị, hai giá trị, ba giá trị và bốn giá trị background-position .
Hỗ trợ trình duyệt
Các giá trị cơ bản được hỗ trợ ở mọi nơi. Cú pháp bốn giá trị có hỗ trợ sau:
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse , dữ liệu này có nhiều chi tiết hơn. Một con số chỉ ra rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
Chrome
Firefox
IE
Edge
Safari
25
13
9
12
7
Di động / Máy tính bảng
Android Chrome
Android Firefox
Android
iOS Safari
102
101
4.4
7.0-7.1
Đó là mức hỗ trợ giống như background-position-x và < thuộc tính code> background-position-y .
Thông tin thêm
Có liên quan
Xem thêm những thông tin liên quan đến chủ đề vị trí ảnh nền css
How To Add A Background Cover Image In CSS *2022*
- Tác giả: Tech Talk Tutorials
- Ngày đăng: 2022-02-15
- Đánh giá: 4 ⭐ ( 5172 lượt đánh giá )
- Khớp với kết quả tìm kiếm: How To Add A Background Cover Image In CSS *2022*
This is a video tutorial on how to add a background image to cover your website using html5 and css3. I will be using VS Code and the Google Chrome web browser.
Chapters
0:00 How To Add A Background Cover Image In CSS
0:20 Create A Folder On The Desktop
1:30 Open VS Code And Locate The Folder
2:00 How To Create An HTML File
2:30 How To Create A HTML Boilerplate
2:43 How To Create A CSS File
3:15 How To Link A CSS File To HTML
4:30 How To Create A Webpage Background Image In CSS
6:45 Example Of A Webpage Background Imagetechnicalwriter webdeveloment css3
You can email me at: craigjohnson4770@gmail.com
Visit Me On Reddit At https://www.reddit.com/r/No_RestForTheWicked/
Follow Me On Facebook At https://www.facebook.com/No-Rest-For-The-Wicked-104557294721998
Follow Me On Twitter At https://twitter.com/CraigJohnson20
Vị trí ảnh nền
- Tác giả: hiepsiit.net
- Đánh giá: 4 ⭐ ( 8171 lượt đánh giá )
- Khớp với kết quả tìm kiếm:
Thiết lập hình nền trong CSS
- Tác giả: timoday.edu.vn
- Đánh giá: 5 ⭐ ( 8357 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Cách thiết lập hình nền trong CSS như màu sắc, hình ảnh, cách sử dụng các thuộc tính của hình nền như có lặp không, vị trí ảnh, viết css ngắn cho hình nền …
Hướng dẫn cách thiết lập thuộc tính Background Image CSS
- Tác giả: kmedia.com.vn
- Đánh giá: 3 ⭐ ( 9795 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Trong bài viết này, tôi sẽ hướng dẫn các bạn cách thiết lập thuộc tính background image css để định dạng nền cho phần tử HTML.
Cách áp dụng CSS cho thẻ image, ảnh nền
- Tác giả: funix.edu.vn
- Đánh giá: 5 ⭐ ( 9335 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Học cách áp dụng CSS cho thẻ image, ảnh nền đảm bảo đơn giản, dễ thực hiện. Hãy tham khảo ngay bài viết dưới đây, FUNiX sẽ hướng dẫn chi tiết cho bạn!
Background trong CSS, Thuộc tính Background-image, size trong CSS
- Tác giả: hoclaptrinh.vn
- Đánh giá: 5 ⭐ ( 9960 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Background trong CSS, Thuộc tính Background-image trong CSS. Để xác định background các phần tử trong HTML, bạn có thể sử dụng các thuộc tính background trong CSS.
Background trong CSS
- Tác giả: vietjack.com
- Đánh giá: 3 ⭐ ( 2651 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Background trong CSS – Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.
Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình