3 trong số 9 quy tắc CSS trong bài viết này dành cho các trang web đáp ứng, tự động thay đổi kích thước hình nền. Phần còn lại liên quan đến việc xếp gạch, định vị hoặc thay đổi kích thước hình ảnh thành kích thước tĩnh.

Bạn đang xem : hình nền trong div

Để bảo mật, một email được gửi đến cần bạn thực hiện. Để xác nhận đăng ký của bạn, hãy nhấp vào liên kết trong email đó.

Chia đôi với Hình nền

Bao gồm các quy tắc CSS cho kích thước hình ảnh nền đáp ứng

Việc chỉ định hình nền trong div tương tự như việc chỉ định hình nền cho toàn bộ trang web.

3 trong số 9 quy tắc CSS dành cho các trang web đáp ứng, tự động thay đổi kích thước hình nền.


Chia sẻ Twitter Tweet này

Với một div, hình ảnh nền được giới hạn trong div. Bất kỳ div nào trên một trang đều có thể có hình nền của riêng chúng.

Nội dung Div nằm trên đầu hình nền của div giống như nội dung trang web nằm trên hình nền của nó.

Một số nội dung có thể được hưởng lợi từ hình nền bên dưới.

Ví dụ: một bài thơ trên nền có kết cấu hoặc hình ảnh của một bức tranh màu nước. Một quảng cáo có thể được trình bày trên một biểu đồ bị tắt tiếng hoặc một biểu trưng. Tùy thuộc vào loại trang web, các nút điều hướng có thể được đặt trong một div với hình nền đẹp.

Ba trong số chín quy tắc CSS dành cho các trang web đáp ứng, tự động thay đổi kích thước hình nền. Những quy tắc này được chỉ ra trong các phần nơi chúng được mô tả.

Hình ảnh nền có thể được xếp, đặt ở một vị trí cụ thể, kéo dài để lấp đầy toàn bộ div và, đối với các trang web đáp ứng, được định kích thước tự động so với kích thước của div.

Hình ảnh GIF, JPG và PNG có thể được sử dụng cho hình nền.

Tất cả các ví dụ đều có kiểu nội tuyến. Đối với các trang công khai trực tiếp, bạn thường có kiểu trong thẻ kiểu CSS hoặc nhập kiểu đó từ tệp CSS bên ngoài.

Hình nền lát gạch

Đây là ví dụ đầu tiên. (Hình nền lát gạch hoặc lặp lại là mặc định.)

Lát gạch

Đây là mã nguồn:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; viền: đen đặc 1px;
   

background-image: url (https://www.willmaster.com/library/images/background-sample-50.jpg);

"& gt; & lt; h1 & gt; & lt; span style = "background-color: white;" & gt; Lát gạch & lt; / span & gt; & lt; / h1 & gt; & lt; / div & gt;

Dòng đầu tiên của kiểu CSS chỉ định chiều cao, chiều rộng và đường viền của div. Điều này sẽ khá nhất quán cho tất cả các ví dụ và sẽ không được đề cập lại trong các ghi chú ví dụ.

Dòng thứ hai của kiểu CSS là nơi tạo nên niềm vui. Thuộc tính CSS là background-image và giá trị của nó là url (…), “…” được thay thế bằng URL của hình ảnh. Vạch có màu xanh lam.

Nội dung của div là một thẻ h1 với “Biểu trưng Willmaster.” Vì hình nền đe dọa lấn át các từ, tôi đã sử dụng thẻ span để chỉ định nền trắng cho các từ của nội dung.

Một số ví dụ có nội dung, một số thì không. Trừ khi có điều gì đó bất thường về nội dung, nó sẽ không được đề cập lại trong ghi chú ví dụ.

Hình nền xếp theo chiều ngang

Ví dụ tiếp theo này có hình nền được lát theo chiều ngang, được lặp lại dọc theo phần trên cùng của div.

Lát theo chiều ngang

Mã nguồn:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; viền: đen đặc 1px;
   background-image: url (https://www.willmaster.com/library/images/background-sample-50.jpg);
   

background-repeat: repeat-x;

"& gt; & lt; h1 & gt; & lt; span style = "background-color: white;" & gt; Lát theo chiều ngang & lt; / span & gt; & lt; / h1 & gt; & lt; / div & gt;

Thuộc tính CSS background-repeat với giá trị repeat-x (màu xanh lam) yêu cầu trình duyệt lặp lại hình ảnh theo chiều ngang, một lần. (Giá trị lặp lại-y là để lặp lại theo chiều dọc. Xem ví dụ tiếp theo.)

Xem Thêm  Hướng dẫn học SQL cho người mới bắt đầu với SQL Server - các câu lệnh truy vấn trong sql server 2008

Hình ảnh nền lát gạch dọc

Ở đây, hình nền được lát theo chiều dọc.

Lát dọc

Mã nguồn:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; viền: đen đặc 1px;
   background-image: url (https://www.willmaster.com/library/images/background-sample-50.jpg);
   

background-repeat: repeat-y;

"& gt; & lt; h1 & gt; Lát dọc & lt; / h1 & gt; & lt; / div & gt;

Thuộc tính CSS background-repeat với value repeat-y (màu xanh lam) yêu cầu trình duyệt lặp lại hình ảnh theo chiều dọc, một lần. (Giá trị lặp lại-x là để lặp lại theo chiều ngang. Xem ví dụ trước.)

Hình nền Cho đến Thời điểm hiện tại

Hình nền này là cho đến khi Nền chỉ chứa một phiên bản của hình ảnh.

Đã đến ngày

Mã nguồn:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; viền: đen đặc 1px;
   background-image: url (https://www.willmaster.com/library/images/background-sample-50.jpg);
   

background-repeat: không lặp lại;

"& gt; & lt; h1 & gt; Cho đến khi & lt; / h1 & gt; & lt; / div & gt;

Thuộc tính CSS background-repeat với giá trị no-repeat (màu xanh lam) yêu cầu trình duyệt không lặp lại hình ảnh Kết quả là hình ảnh chỉ xuất hiện một lần. Vị trí mặc định là góc trên cùng bên trái.

Hình nền Căn giữa

Ở đây, hình ảnh được căn giữa ở giữa div.

Mã nguồn:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; viền: đen đặc 1px;
   background-image: url (https://www.willmaster.com/library/images/background-sample-50.jpg);
   background-repeat: không lặp lại;
   

background-position: center center;

"& gt; & lt; / div & gt;

Thuộc tính CSS background-position chỉ định vị trí của background-image. Nó nhận một hoặc hai giá trị. Giá trị đầu tiên là vị trí nằm ngang. Giá trị thứ hai là vị trí thẳng đứng.

Trong ví dụ, cả hai giá trị đều là “center” (màu xanh lam), điều này làm cho hình ảnh được căn giữa theo cả chiều ngang và chiều dọc.

Các giá trị ngang hợp lệ là:

  • trái
  • đúng
  • trung tâm
  • phần trăm chiều rộng của div (25% là một phần tư chiều vào từ bên trái) hoặc
  • vị trí pixel nằm ngang trong div được đo từ cạnh trái (50px cách cạnh trái 50 pixel).

Các giá trị dọc hợp lệ là:

  • hàng đầu
  • dưới cùng
  • trung tâm
  • phần trăm chiều cao của div (25% là một phần tư quãng đường từ trên xuống) hoặc
  • vị trí pixel dọc trong div được đo từ cạnh trái (50px là 50 pixel từ trên xuống).

Nếu thuộc tính background-position chỉ chứa một giá trị, nó được giả định là giá trị vị trí ngang và vị trí dọc được giả định là “trung tâm”.

Hình nền có kích thước tĩnh

Như một minh chứng về những gì có thể làm được, hình nền này được thay đổi kích thước thành 40×60 pixel.

Mã nguồn:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; viền: đen đặc 1px;
   background-image: url (https://www.willmaster.com/library/images/background-sample-50.jpg);
   background-repeat: không lặp lại;
   background-position: trung tâm trung tâm;
   

background-size: 40px 60px;

"& gt; & lt; / div & gt;

Thuộc tính CSS background-size chỉ định kích thước của background-image. Nó nhận một hoặc hai giá trị. Giá trị đầu tiên là vị trí nằm ngang. Giá trị thứ hai là vị trí thẳng đứng.

Nếu thiếu giá trị thứ hai cho kích thước tĩnh được chỉ định bằng pixel, giá trị đó được giả định là “tự động” với hình ảnh được chia tỷ lệ tương ứng theo kích thước hình ảnh gốc.

Trong ví dụ, các giá trị là “40px” và “60px” (màu xanh lam), khiến hình ảnh có chiều rộng 40 pixel và chiều cao 60 pixel.

Hình nền có kích thước thích ứng

Những ví dụ này minh họa quy tắc đầu tiên trong số một số quy tắc CSS thân thiện với trang web đáp ứng để thay đổi kích thước hình nền. Hình ảnh được chỉ định bằng 85% chiều cao của div.

Xem Thêm  Cách thay đổi màu nền bằng CSS - cách thay đổi màu nền trong css

Hai ví dụ minh họa hình nền được tự động thay đổi kích thước theo kích thước của div mà nó có trong đó.

Không có nội dung nào trong các div ví dụ này để thể hiện rõ hơn kích thước của hình ảnh nền của chúng.

Chỉ có chiều cao được chỉ định là khác đối với div thứ hai. Do đó, chỉ có mã nguồn của div đầu tiên là ở đây:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; viền: đen đặc 1px;
   background-image: url (https://www.willmaster.com/library/images/background-sample-250.jpg);
   background-repeat: không lặp lại;
   background-position: trung tâm trung tâm;
   

background-size: auto 85%;

"& gt; & lt; / div & gt;

Kích thước nền thuộc tính CSS cũng được sử dụng ở đây, giống như với hình nền có kích thước tĩnh. Trong trường hợp này, một tỷ lệ phần trăm được chỉ định thay vì kích thước pixel.

Cũng như kích thước pixel, thuộc tính kích thước nền nhận một hoặc hai giá trị:

  1. Giá trị đầu tiên là “tự động” hoặc chiều rộng của hình ảnh được chỉ định dưới dạng phần trăm kích thước chiều ngang của div. Nếu “tự động”, hình ảnh được thu nhỏ tỷ lệ theo kích thước của hình ảnh gốc.

  2. Giá trị thứ hai là tự động hoặc chiều cao của hình ảnh được chỉ định dưới dạng phần trăm kích thước dọc của div. Nếu “tự động”, hình ảnh được thu nhỏ tỷ lệ theo kích thước của hình ảnh gốc. Nếu giá trị thứ hai bị thiếu, nó được giả định là “tự động”.

Trong ví dụ này, các giá trị là “auto” và “85%” (màu xanh lam), điều này làm cho chiều cao hình ảnh bằng 85% chiều cao của div và chiều rộng hình ảnh được chia tỷ lệ theo kích thước của hình ảnh gốc.

Ảnh nền toàn bìa

Những ví dụ này chứng minh một quy tắc CSS thân thiện với trang web đáp ứng khác cho hình nền.

Hình nền được tự động thay đổi kích thước để bao phủ toàn bộ nền của div. Mọi hình ảnh thừa đều bị cắt.

Các ví dụ sử dụng các định nghĩa CSS giống nhau ngoại trừ chiều rộng của div.

Chỉ có chiều rộng là khác nhau đối với div thứ hai. Do đó, chỉ có mã nguồn của div đầu tiên là ở đây:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; viền: đen đặc 1px;
   background-image: url (https://www.willmaster.com/library/images/background-sample-250.jpg);
   background-repeat: không lặp lại;
   background-position: trung tâm trung tâm;
   

background-size: cover;

"& gt; & lt; / div & gt;

Kích thước nền thuộc tính CSS được sử dụng lại, lần này với giá trị “cover” (màu xanh lam).

Hình ảnh có kích thước nên tất cả các kích thước ít nhất phải lớn bằng nền có sẵn của hình ảnh. Bất kỳ phần nào của hình ảnh đã thay đổi kích thước nằm ngoài div đều bị cắt.

Hình nền có kích thước vùng chứa

Những ví dụ này chứng minh quy tắc CSS thân thiện với trang web đáp ứng thứ ba cho hình nền.

Hình nền được tự động thay đổi kích thước thành lớn nhất có thể và vẫn nằm hoàn toàn trong div.

Hai ví dụ sử dụng các định nghĩa CSS giống nhau ngoại trừ chiều cao của div.

Bởi vì chiều cao là tất cả khác nhau, chỉ có mã nguồn của div đầu tiên là ở đây:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; viền: đen đặc 1px;
   background-image: url (https://www.willmaster.com/library/images/background-sample-250.jpg);
   background-repeat: không lặp lại;
   background-position: trung tâm trung tâm;
   

background-size: chứa;

"& gt; & lt; / div & gt;

Thuộc tính CSS background-size có giá trị “chứa” (màu xanh lam).

Toàn bộ hình ảnh được chứa trong div, được thay đổi kích thước lớn nhất có thể với tỷ lệ chiều rộng và chiều cao được duy trì.

Xem Thêm  Làm cách nào để xóa tất cả các nút con khỏi tất cả các đoạn trong jQuery? - jquery loại bỏ tất cả các nút con

Ghi chú

  1. Đối với các div cuộn trong đó hình nền không được cuộn theo nội dung, hãy sử dụng quy tắc CSS này:

    background-attachment: cố định;
    
    
  2. Ba quy tắc CSS hình nền đáp ứng là CSS3. Tất cả đều được công nhận bởi các phiên bản mới nhất của từng trình duyệt trong số năm trình duyệt chính.

6 trong số 9 quy tắc CSS đầu tiên được mô tả ở đây có hình nền kích thước cố định. Hình ảnh có thể bị cắt nếu chúng không vừa chính xác trong div.

3 trong số 9 quy tắc CSS khác được mô tả ở đây có thể được sử dụng trên các trang web đáp ứng, với các hình nền tự động thay đổi kích thước khi cần thiết để phù hợp với bất kỳ thay đổi kích thước nào của div.

Chín quy tắc CSS khác nhau cung cấp cho bạn các cách để triển khai các phương pháp xuất bản hình nền khác nhau rộng rãi trong div.

Để có hiệu ứng trình chiếu với hình nền, yêu cầu JavaScript ngoài CSS, hãy xem Trình chiếu hình nền .

(Bài viết này xuất hiện lần đầu trong Khả năng ezine.)

Sẽ Bontrager


Xem thêm những thông tin liên quan đến chủ đề hình nền trong div

Basic CSS: Give a Background Color to a div Element | freeCodeCamp

alt

  • Tác giả: Useful Programmer
  • Ngày đăng: 2018-08-10
  • Đánh giá: 4 ⭐ ( 8201 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This is a basic CSS tutorial on how to give a background color to a div element. All of these tutorials are part of a series to learn to code with Free Code Camp. My goal is to help those that are stuck on their Free Code Camp journey. Often, those learning to code are stuck on parts of code which a more senior programmer would be able to help rapidly with. Enjoy!

Thiết lập màu nền (background) trong HTML

  • Tác giả: viettuts.vn
  • Đánh giá: 5 ⭐ ( 3968 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Màu nền (background) trong HTML của trang web mặc định là màu trắng. Bạn không thích màu này và muốn thiết lập một màu nền khác cho trang của bạn. HTML cung cấp cho bạn hai cách sau để cài đặt nền cho trang web của bạn

Cách để Thiết lập hình nền trong HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 4 ⭐ ( 1850 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 HTML. Nếu muốn thêm một hình ảnh vào website, tất cả những gì bạn cần là mã HTML. Còn nếu muốn đặt một hình ảnh làm hình nền cho trang web, bạn cần cả HTML và CSS. HTML là viết tắt của Hypertext Markup…

9 cách sử dụng background (nền) trong CSS

  • Tác giả: freehost.page
  • Đánh giá: 4 ⭐ ( 1304 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thêm hình nền vào div bằng CSS

  • Tác giả: vi.waldorf-am-see.org
  • Đánh giá: 3 ⭐ ( 1338 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đã cố gắng thêm hình nền vào một lớp div bằng CSS, nhưng không thành công. Mã HTML: