Cách kéo giãn hình nền để nó lấp đầy toàn bộ trang web hoặc toàn bộ cột hoặc khối

Bạn đang xem: css nền căng để lấp đầy

Cách kéo dài ảnh nền để lấp đầy toàn bộ trang web (hoặc một cột của nó) (HTML / CSS)

Chia tỷ lệ hình nền để lấp đầy vùng chứa của nó

Cách chia tỷ lệ ảnh nền để lấp đầy toàn bộ trang web (hoặc một cột của nó) (HTML / CSS)

của Christopher Heng,

của Christopher Heng, thesitewizard.com

Tôi đã được một người khách hỏi làm thế nào anh ta có thể “kéo dài một bức ảnh nền để nó lấp đầy toàn bộ màn hình”.
Bài viết này hướng dẫn bạn cách sử dụng
CSS
để thay đổi kích thước hình ảnh sao cho nó lấp đầy toàn bộ cửa sổ trình duyệt (nếu trang web của bạn chỉ có một cột) hoặc
toàn bộ cột (đối với các trang web có nhiều hơn một trong số chúng).

Sơ bộ

Như với tất cả của tôi
Hướng dẫn CSS ,
bạn sẽ cần biết một chút về
HTML
và CSS
, nếu không, bạn sẽ gặp khó khăn khi làm theo những gì tôi nói bên dưới, không nói gì đến việc điều chỉnh nó cho phù hợp với trang web của bạn.
Bạn không cần phải là một chuyên gia, nhưng cần phải có một số thông tin cơ bản.

Ngoài ra, xin lưu ý rằng khi tôi nói “hình nền”, tôi có nghĩa là hình ảnh tạo thành phông nền của
một trang web, hoặc một phần của nó, với khả năng có một số nội dung nền trước phủ lên nó. Một hình ảnh như vậy là
thường được đặt trên một trang bằng thuộc tính CSS background-image .

Một vài cách để điều chỉnh tỷ lệ hình ảnh nền

Thuộc tính CSS để chia tỷ lệ hình nền sao cho nó lấp đầy tất cả không gian có sẵn là background-size .

Do đó, bạn vẫn cần phải tìm hiểu xem phải làm gì nếu bức tranh, khi được mở rộng, không hoàn toàn phù hợp với
không gian xung quanh. Rốt cuộc, bạn không thể mong đợi tất cả khách truy cập của mình lướt web khi mở cửa sổ trình duyệt
thành bội số hoàn hảo của kích thước hình ảnh của bạn.

Một ví dụ có thể làm cho điều này rõ ràng hơn. Giả sử chúng tôi muốn sử dụng logo của thesitewizard.com làm hình nền.
Đây là một bức tranh hình chữ nhật có kích thước 202 x 42 pixel. Nếu bạn định đặt nó vào một bao vây
trong số (giả sử) 300 x 200 pixel và mở rộng nó theo tỷ lệ, nó sẽ không chia tỷ lệ hoàn hảo để vừa với
toàn bộ không gian.

Có ít nhất 3 cách mà tôi có thể nghĩ ra để giải quyết vấn đề này. Vì câu hỏi được hỏi là về
kéo dài một hình ảnh để lấp đầy toàn bộ nền, ở đây tôi sẽ giả định rằng bạn không muốn trình duyệt của
hành động mặc định là sao chép và xếp hình ảnh của bạn trên toàn bộ cửa sổ để lấp đầy nó. (Nếu bạn
làm, bạn không cần bài viết này, vì trình duyệt tự động làm điều đó.)

Xem Thêm  Best Known Open-source Swift Libraries To Use In 2022 - - mvvm rxswift

  1. Duy trì Tỷ lệ Khung hình, Không Cắt bớt

    Nếu bạn muốn hình ảnh không bị biến dạng và hiển thị toàn bộ, một cách là
    đặt quy tắc CSS
    nói background-size: chứa . Kết quả của việc này được hiển thị bên dưới.

    Mã CSS có liên quan như sau:

    #demobox {
    background-image: url (../ img / logo202x42.png);
    background-size: chứa;
    background-repeat: không lặp lại;
    }

    Quy tắc chính cần lưu ý là background-size: chứa . Nó mở rộng hình ảnh theo tỷ lệ
    nó càng lớn càng tốt trong khối bao quanh đã cho, nhưng không lớn đến mức bất kỳ phần nào của bức tranh
    vượt quá thùng chứa.

    Vì hình ảnh, khi được thay đổi kích thước theo cách này, không che hết từng chút không gian trống, trình duyệt sẽ
    tự động sao chép nó trên khu vực còn lại (tức là xếp nó). Nếu bạn không muốn điều này xảy ra,
    bạn có thể buộc trình duyệt chỉ hiển thị một bản sao của ảnh với background-repeat: no-repeat ,
    mà tôi đã làm cho ví dụ trên.

    Nếu bạn muốn, bạn có thể căn giữa (“trung tâm” nếu bạn sử dụng
    khác nhau
    biến thể của tiếng Anh
    ) hình ảnh.

    Quy tắc CSS bổ sung cần thiết là:

    background-position-y: center;

    Quy tắc background-position-y: center căn giữa logo theo chiều dọc. Mặt khác,
    nếu ảnh của bạn cao hơn chiều rộng, bạn có thể cần sử dụng background-position-x: center
    để thay thế nó ở giữa dọc theo trục ngang.

  2. Duy trì Tỷ lệ Khung hình, Tràn Clip

    Một cách khác là mở rộng hình ảnh một cách tương xứng đến mức mọi phần của vùng chứa đều có nó làm nền,
    cắt bỏ bất kỳ phần nào tràn ra khu vực bao quanh.

    Ở trên đã được thực hiện bằng cách sử dụng các quy tắc CSS sau đây.

    #demobox {
    background-image: url (../ img / logo202x42.png);
    background-size: cover;
    }

    Để không để lại bất kỳ khoảng trống nào và đồng thời không làm biến dạng hình ảnh, trình duyệt phải
    phóng to logo sao cho trục ngắn nhất của nó lấp đầy mặt tương ứng của khối bao quanh. Điều này có nghĩa là
    tuy nhiên, mặt còn lại vượt ra ngoài vùng hiển thị, và do đó bị cắt bớt.

  3. Kéo dài để lấp đầy mọi thứ, bỏ qua tỷ lệ khung hình

    Nếu bạn không quan tâm đến việc hình ảnh của mình trông dài ra hay bị thu nhỏ, bạn có thể buộc trình duyệt
    để kéo dài nó dọc theo cả trục của nó để nó lấp đầy toàn bộ khu vực nền.

    Để làm điều này, tôi chỉ định rằng kích thước của bức tranh bằng kích thước của thùng chứa.

    #demobox {
    background-image: url (../ img / logo202x42.png);
    kích thước nền: 100% 100%;
    }

    Quy tắc “100%” đầu tiên của quy tắc background-size: 100% 100% chỉ định chiều rộng và quy tắc thứ hai
    chiều cao. Phần trăm có liên quan đến khối bao quanh.

Khả năng tương thích

Tất cả các phiên bản hiện tại của các trình duyệt chính đều hỗ trợ thuộc tính background-size . Nếu
khách truy cập của bạn sử dụng Internet Explorer, họ sẽ cần ít nhất phiên bản 9 để thấy tác dụng của nó.

Bản quyền © 2018 Christopher Heng. Mọi quyền được bảo lưu.
Nhận thêm các mẹo và bài viết miễn phí như this ,
về thiết kế web, quảng cáo, doanh thu và kịch bản, từ https://www.thesitewizard.com/ .

thesitewizard ™ News Feed (RSS Site Feed)

Bạn có thấy bài viết này hữu ích không? Bạn có thể tìm hiểu các bài báo và tập lệnh mới được xuất bản trên
thesitewizard.com
bằng cách đăng ký vào nguồn cấp dữ liệu RSS. Chỉ cần trỏ trình đọc nguồn cấp RSS của bạn hoặc trình duyệt hỗ trợ nguồn cấp RSS tại
https://www.thesitewizard.com/thesitewizard.xml .
Bạn có thể đọc thêm về cách đăng ký
Nguồn cấp dữ liệu trang RSS
từ Câu hỏi thường gặp về RSS của tôi.

Vui lòng không in lại bài viết này

Bài viết này đã được đăng ký bản quyền. Vui lòng không sao chép hoặc phân phối toàn bộ hoặc một phần bài viết này, dưới mọi hình thức.

Các bài viết liên quan

Bài viết mới

Các bài báo phổ biến

Cách liên kết đến trang này

Để liên kết đến trang này từ trang web của bạn, chỉ cần cắt và dán mã sau vào
trang web. (Chuyển sang chế độ nguồn HTML của trình chỉnh sửa web của bạn trước khi dán.)

Nó sẽ xuất hiện trên trang của bạn dưới dạng:

Cách kéo dài ảnh nền để lấp đầy toàn bộ trang web (hoặc một cột của nó) (HTML / CSS)


Xem thêm những thông tin liên quan đến chủ đề căng nền css để lấp đầy

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 ⭐ ( 8855 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 Image

    technicalwriter 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

Cách kéo giãn hình nền để lấp đầy một div

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 4579 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Thêm vào background-size:100% 100%; vào css của bạn bên dưới hình nền. Bạn cũng có thể…

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á: 4 ⭐ ( 6490 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.

Bài 09: Làm Việc Với Nền

  • Tác giả: hocban.vn
  • Đánh giá: 3 ⭐ ( 7694 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm việc với nền (background) là việc mà bạn sẽ thực hiện rất nhiều trong CSS. Như chọn màu nền, ảnh nền, cách hiển thị ảnh nền,..

[Tự học CSS] -Tự học về các định dạng màu nền trong CSS (Background)

  • Tác giả: giuseart.com
  • Đánh giá: 5 ⭐ ( 2839 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết hôm nay mình sẽ giới thiệu đến các bạn một thuộc tính được sử dụng rất nhiều trong CSS, đó là background – thuộc tính dùng để định màu nền…

Căn giữa phần tử HTML bằng CSS (Ngang, dọc đầy đủ)

  • Tác giả: phukio.com
  • Đánh giá: 3 ⭐ ( 1655 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu bạn là người mới học CSS chắc chắn sẽ rất đau đầu khi cân giữa các phần tử trong HMTL.

CSS: Cách kéo giãn hình nền để lấp đầy một div

  • Tác giả: vi.fmihm.org
  • Đánh giá: 5 ⭐ ( 9319 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi muốn đặt hình nền thành các div khác nhau, nhưng vấn đề của tôi là: Kích thước hình ảnh cố định (60px). Thay đổi kích thước của div Làm cách nào để kéo giãn hình nền để lấp đầy toàn bộ backgro …

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

Xem Thêm  Khái niệm cơ bản về CSS: Cách sử dụng Biểu định kiểu CSS - cách sử dụng biểu định kiểu

By ads_php