Bạn muốn biết cách thay đổi kích thước ảnh nền bằng cách sử dụng thuộc tính stretch của HTML và CSS? Bài viết này cung cấp mã HTML để giúp bạn kéo giãn ảnh nền.
CSS3 giới thiệu một thuộc tính mới, `background-size` , cho phép bạn thay đổi kích thước hình nền. Điều này có nghĩa là bạn có thể kéo giãn hình ảnh theo chiều ngang, chiều dọc hoặc cả hai. Bạn có thể thay đổi kích thước theo bất kỳ cách nào bạn muốn.
- Ví dụ:, bạn có thể làm cho hình nền giãn ra (và co lại) theo kích thước của phần tử được áp dụng.
Trong ví dụ sau, chúng ta sử dụng `provide background-size` với giá trị 100%, có nghĩa là nó có cùng kích thước với phần tử, bất kể kích thước thực tế của hình ảnh.
Bạn cũng có thể quan tâm đến bài viết: Cách chỉnh sửa HTML trên Tumblr. 4 cách thực hiện
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
<html>
<đầu>
<tiêu đề> Ví dụ
<style type="text/css">
.lý lịch {
kích thước hộp : hộp viền ;
chiều rộng: 100%;
chiều cao: 150px;
phần đệm: 3px;
hình nền: url ( /pix/samples/bg1.gif );
đường viền: 1px màu đen;
kích thước nền: 100% 100%;
}
<cơ thể>
<div lớp = «nền» >
Đáy căng…
< p > Và đây là hình ảnh ở kích thước ban đầu:
< img src = "/pix/samples/bg1.gif" style = "viền: 1px màu đen đặc;" >
Kéo dài kích thước hình nền bằng HTML cho toàn bộ trang
Ví dụ trên sử dụng hình nền được áp dụng cho phần tử <div> . Bạn cũng có thể áp dụng nó cho phần tử <body> , kết quả là hình ảnh sẽ kéo giãn để lấp đầy toàn bộ trang.
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
<html>
<đầu>
<tiêu đề> Ví dụ
<style type="text/css">
html,
thân hình {
chiều cao: 100%;
}
thân hình {
hình nền: url ( /pix/samples/bg1.gif );
lặp lại nền : norepea ;
kích thước nền: 100% 100%;
}
<cơ thể>
< p > Trang này có hình nền kéo dài...
< p > Và đây là hình ảnh ở kích thước ban đầu:
< img src = "/pix/samples/bg1.gif" style = "viền: 1px màu đen đặc;" >
Bạn có thể cần đặt thuộc tính của các phần tử và trong. chiều cao100%
Tăng kích thước ảnh nền bằng HTML mà không cần "kéo dài" ảnh ra khỏi tỷ lệ
Thuộc tính kích thước nền cũng chấp nhận các giá trị ngăn hình ảnh bị kéo dài ra ngoài tỷ lệ.
Tăng kích thước hình nền bằng HTML bằng cách sử dụng kích thước nền: cover
Bạn có thể sử dụng background-size: cover để thu nhỏ hình ảnh, đồng thời giữ nguyên tỷ lệ khung hình vốn có của nó (nếu có), sao cho cả chiều rộng và chiều cao đều bao phủ hoàn toàn khu vực định vị nền.
Sử dụng tùy chọn này sẽ đảm bảo rằng hình ảnh không bị kéo giãn quá mức. Bạn nên nhớ rằng một số phần của hình ảnh có thể bị ẩn nếu thành phần đó có tỷ lệ khác với hình nền của bạn.
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
<html>
<đầu>
<tiêu đề> Ví dụ
<style type="text/css">
html,
thân hình {
chiều cao: 100%;
}
thân hình {
hình nền: url ( /pix/samples/bg1.gif );
lặp lại nền : norepea ;
kích thước nền: bìa;
}
<cơ thể>
< p > Trang này có hình nền kéo dài...
< p > Và đây là hình ảnh ở kích thước ban đầu:
< img src = "/pix/samples/bg1.gif" style = "viền: 1px màu đen đặc;" >
Tăng kích thước hình nền bằng HTML bằng cách sử dụng kích thước nền: chứa
Bạn có thể sử dụng background-size: contain để điều chỉnh kích thước hình ảnh, đồng thời giữ nguyên tỷ lệ khung hình vốn có của nó (nếu có), sao cho cả chiều rộng và chiều cao đều nằm gọn trong vùng định vị nền.
Sử dụng tùy chọn này sẽ đảm bảo rằng không có phần nào của hình ảnh bị ẩn khi tăng hoặc giảm tỷ lệ.
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
<html>
<đầu>
<tiêu đề> Ví dụ
<style type="text/css">
html,
thân hình {
chiều cao: 100%;
}
thân hình {
hình nền: url ( /pix/samples/bg1.gif );
lặp lại nền : norepea ;
kích thước nền : chứa ;
}
<cơ thể>
< p > Trang này có hình nền kéo dài...
< p > Và đây là hình ảnh ở kích thước ban đầu:
< img src = "/pix/samples/bg1.gif" style = "viền: 1px màu đen đặc;" >
Sử dụng các lớp CSS để thay đổi kích thước hình nền bằng HTML
Mặc dù thuộc tính kích thước nền là cách được khuyến nghị để kéo dài hình nền, nhưng thuộc tính này không phải lúc nào cũng tồn tại.
Trước khi tính năng này được phát minh, người ta cần phải sử dụng một chút thủ thuật để đạt được hiệu ứng " hình nền bị kéo giãn ".
Một phương pháp là sử dụng một phần tử <img> thông thường rồi xếp lớp nó để tạo hiệu ứng giống như ảnh nền.
Thuộc tính thay đổi kích thước hình nền với HTML và CSS
Bây giờ, hãy xem một số ví dụ về thuộc tính thay đổi kích thước hình nền bằng HTML và CSS:
thí dụ
Tại đây, bạn chỉ định kích thước của ảnh nền bằng tùy chọn " auto " và đơn vị là pixel:
#ví dụ 1 {
nền: url(mountain.jpg);
lặp lại nền: không lặp lại;
kích thước nền: tự;
}#ví dụ 2 {
nền: url(mountain.jpg);
lặp lại nền: không lặp lại;
kích thước nền: 300px 100px;
}
Bây giờ chúng ta cùng xem thêm các ví dụ Test để bạn tự mình thử sức dưới đây nhé.
Xác định và sử dụng thay đổi kích thước hình nền bằng HTML
Thuộc tính kích thước nền chỉ định kích thước của hình nền.
Có bốn cú pháp khác nhau mà bạn có thể sử dụng với thuộc tính này: cú pháp từ khóa ("auto", "cover" và "contain" ), cú pháp một giá trị (đặt chiều rộng hình ảnh (chiều cao trở thành " auto "), cú pháp hai giá trị (giá trị đầu tiên: chiều rộng hình ảnh, giá trị thứ hai: chiều cao) và cú pháp nhiều nền (phân cách bằng dấu phẩy).
| Giá trị mặc định: | tự động |
| Kế thừa: | Không |
| Hoạt hình: | Vâng. |
| Phiên bản: | CSS3 |
| Cú pháp JavaScript: | đối tượng .style.backgroundSize = “60px 120px” |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau là -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố đó.
| Bất động sản | |||||
| kích thước nền | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
Cú pháp CSS để thay đổi kích thước hình nền bằng HTML
kích thước nền: tự động | chiều dài | bìa | chứa | ban đầu|kế thừa;
Giá trị thuộc tính
| Giá trị | Mô tả Chi tiết |
| tự động | Giá trị mặc định. Hình nền được hiển thị ở kích thước ban đầu. |
| chiều dài | Đặt chiều rộng và chiều cao của hình nền. Giá trị đầu tiên đặt chiều rộng, giá trị thứ hai đặt chiều cao. Nếu chỉ cung cấp một giá trị thì giá trị thứ hai sẽ được đặt thành "tự động". Đọc về đơn vị đo độ dài |
| tỷ lệ phần trăm | Đặt chiều rộng và chiều cao của hình nền theo tỷ lệ phần trăm của phần tử gốc. Giá trị đầu tiên đặt chiều rộng, giá trị thứ hai đặt chiều cao. Nếu chỉ cung cấp một giá trị thì giá trị thứ hai sẽ được đặt thành "tự động" |
| che | Thay đổi kích thước hình nền để bao phủ toàn bộ vùng chứa, ngay cả khi bạn phải kéo dài hình ảnh hoặc cắt bớt một trong các cạnh một chút. |
| chứa | Thay đổi kích thước hình nền để đảm bảo hình ảnh được hiển thị đầy đủ |
| ban đầu | Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu |
| kế thừa | Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về kế thừa |
Thêm ví dụ về thay đổi kích thước hình nền bằng HTML
Để làm rõ hơn các tham số, dưới đây là thêm một số ví dụ về cách thay đổi kích thước ảnh nền bằng HTML:
Ví dụ 1
Chỉ định kích thước của hình nền theo tỷ lệ phần trăm:
#ví dụ 1 {
nền: url(mountain.jpg);
lặp lại nền: không lặp lại;
kích thước nền: 100% 100%;
}#ví dụ 2 {
nền: url(mountain.jpg);
lặp lại nền: không lặp lại;
kích thước nền: 75% 50%;
}Ví dụ 2
Chỉ định kích thước của hình nền có "bìa":
#ví dụ 1{
nền: url(mountain.jpg);
lặp lại nền: không lặp lại;
kích thước nền: bìa;
}
Ví dụ 3
Chỉ định kích thước của hình nền bằng "contain":
#ví dụ 1 {
nền: url(mountain.jpg);
lặp lại nền: không lặp lại;
kích thước nền: chứa;
}
Ví dụ 4
Ở đây chúng ta có hai hình nền. Chúng tôi chỉ định kích thước của hình nền đầu tiên bằng "contain" và hình nền thứ hai có "cover":
#ví dụ 1 {
nền: url(img_tree.gif), url(mountain.jpg);
lặp lại nền: không lặp lại;
kích thước nền: chứa, che;
}
Ví dụ 5
Sử dụng các thuộc tính nền khác nhau để tạo hình ảnh “anh hùng”:
.hero-hình ảnh {
hình nền: url(<photographer.jpg»); /*Hình ảnh được sử dụng */
màu nền: #cccccc; /* Sử dụng nếu không có hình ảnh */
chiều cao: 500px; /* Bạn phải đặt chiều cao được chỉ định */
vị trí nền: trung tâm; /* Căn giữa hình ảnh */
lặp lại nền: không lặp lại; /*Không lặp lại hình ảnh*/
kích thước nền: bìa; /* Thay đổi kích thước hình nền để bao phủ toàn bộ vùng chứa */
}
Cách kéo dài kích thước hình nền bằng HTML để vừa với trang web
Phần này của bài viết giải thích hai cách để kéo dài hình nền cho vừa với trang web bằng CSS3.
- Phương pháp ưa thích: sử dụng thuộc tính CSS3 để kích thước nền và đặt nó thành che.
- Phương pháp thay thế- Sử dụng thuộc tính CSS3 để thiết lập kích thước nền en 100% y vị trí của đáy trong
Cách 1: Phương pháp hiện đại
Hình ảnh là một phần quan trọng của thiết kế trang web hấp dẫn. Chúng mang lại sự thú vị trực quan cho trang và giúp bạn đạt được thiết kế mà bạn đang tìm kiếm. Khi làm việc với hình nền, bạn có thể muốn hình ảnh giãn ra để vừa với trang mặc dù có nhiều loại thiết bị và kích thước màn hình.
Cách tốt nhất để kéo giãn hình ảnh sao cho vừa với nền của một phần tử là sử dụng thuộc tính CSS3, ` background-size` , và đặt nó thành `cover`.
div {
hình nền: url('background.jpg');
kích thước nền: bìa;
lặp lại nền: không lặp lại;
}
Xem ví dụ này trong hành động. Đây là HTML trong hình ảnh bên dưới.
Bây giờ, hãy nhìn vào CSS. Nó không khác nhiều so với mã trước đó. Có một số bổ sung để làm rõ nó.
Bây giờ, đây là kết quả ở chế độ toàn màn hình.
Bằng cách đặt kích thước nền thành che, bạn đảm bảo rằng trình duyệt sẽ tự động chia tỷ lệ hình nền, bất kể lớn đến đâu, để bao phủ toàn bộ khu vực của phần tử HTML mà nó đang được áp dụng. Hãy nhìn vào một cửa sổ hẹp hơn.
Phương pháp này được hơn 90% trình duyệt hỗ trợ, khiến nó trở thành một lựa chọn hiển nhiên trong hầu hết các tình huống. Nó tạo ra một số vấn đề với trình duyệt của Microsoft, vì vậy có thể cần phải sao lưu.
Cách 2: Đường dẫn thay thế
Đây là một ví dụ sử dụng hình nền cho phần thân trang và đặt kích thước của nó là 100% để nó luôn tự động kéo giãn vừa khít màn hình. Phương pháp này không hoàn hảo và có thể gây ra một số khoảng trống không sử dụng, nhưng bằng cách sử dụng thuộc tính `background-position` , bạn có thể khắc phục vấn đề này và vẫn tương thích với các trình duyệt cũ hơn.
thân hình {
nền: url('bgimage.jpg');
lặp lại nền: không lặp lại;
kích thước nền: 100%;
vị trí nền: trung tâm;
}
Sử dụng ví dụ trên với kích thước nền được đặt thành 100%, bạn có thể thấy CSS trông khá giống nhau.
Kết quả trong trình duyệt toàn màn hình hoặc trình duyệt có kích thước tương tự hình ảnh gần như giống hệt nhau. Tuy nhiên, với màn hình hẹp hơn, những sai sót bắt đầu lộ rõ.
Rõ ràng nó không lý tưởng, nhưng nó sẽ hoạt động như một giải pháp thay thế.
Thuộc tính này hoạt động trên IE 9+, Firefox 4+, Opera 10.5+ , Safari 5+, Chrome 10.5+ và tất cả các trình duyệt di động chính. Điều này bao gồm tất cả các trình duyệt hiện đại hiện có, có nghĩa là bạn có thể sử dụng thuộc tính này mà không cần lo lắng về việc nó không hoạt động trên màn hình của người khác.
Tại đây bạn có thể tìm hiểu về: Cách mở tệp HTML trong Google Chrome
Kết luận
Giữa hai phương pháp này, bạn sẽ không gặp khó khăn gì khi hỗ trợ hầu hết tất cả các trình duyệt. Vì kích thước nền: cover thậm chí còn nhận được nhiều sự chấp nhận hơn giữa các trình duyệt, thậm chí sự thay thế này sẽ trở nên không cần thiết. Rõ ràng, CSS3 và các phương pháp thiết kế đáp ứng hơn đã đơn giản hóa và sắp xếp hợp lý việc sử dụng hình ảnh làm nền phản hồi trong các phần tử HTML. Chúng tôi hy vọng đã giúp bạn hiểu được các tính năng, cách sử dụng và chức năng thay đổi kích thước hình nền bằng HTML và CSS.
Tên tôi là Javier Chirinos và tôi đam mê công nghệ. Theo những gì tôi có thể nhớ, tôi rất thích máy tính và trò chơi điện tử và sở thích đó đã dẫn đến một công việc.
Tôi đã xuất bản về công nghệ và tiện ích trên Internet trong hơn 15 năm, đặc biệt là ở mundobytesnăm
Tôi cũng là một chuyên gia về truyền thông và tiếp thị trực tuyến và có kiến thức về phát triển WordPress.