Ảnh nền css di động

Tôi đang cố gắng sử dụng hình nền có thể tự động thay đổi kích thước (chiều rộng và chiều cao) theo kích thước của trình duyệt (theo bất kỳ kích thước nào). Tôi đã sử dụng mã bên dưới, tuy nhiên mã này không hoạt động trên điện thoại thông minh (android). Chiều rộng của hình ảnh được thực hiện chính xác, nhưng chiều cao không muốn tự động thay đổi kích thước. Mọi thứ hoạt động bình thường trên trình duyệt máy tính xách tay. Bất kỳ đề xuất làm thế nào để giải quyết điều này?

Mã mà tôi sử dụng

body {
	background: url(../images/grunge_background_mobile.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}

Trân trọng,

boki

Hướng dẫn này sẽ chỉ cho bạn cách sử dụng CSS tùy chỉnh trong Squarespace để thay đổi hình nền của phần hoặc nền của trang Chỉ mục cụ thể trên thiết bị di động. Một số điều quan trọng cần lưu ý trước khi bạn sao chép và dán nội dung này vào trang web của riêng bạn

Có hai hướng dẫn dưới đây; . 1 trang web. Đảm bảo rằng bạn đang sử dụng đúng hướng dẫn cho phiên bản và chủ đề của mình. Nếu bạn không biết điều đó có nghĩa là gì, hãy xem hướng dẫn dành cho người mới bắt đầu của tôi về CSS để biết thêm thông tin về lý do tại sao đây là thông tin CỰC QUAN TRỌNG cần biết trước khi bạn bắt đầu chơi với mã và cách tìm ra thông tin bạn đang sử dụng. Lấy một bản sao miễn phí tại insidethesquare. đồng/học

Đảm bảo thêm phần này trên một trang bằng cách sử dụng mã chèn tiêu đề trang hoặc khối mã. Nếu bạn không chắc chắn cách thực hiện, hãy xem hướng dẫn này để biết quy trình từng bước

Tải xuống bảng điểm

Phiên bản 7. 1

Hai mã bạn cần làm việc ở bên dưới, nhưng hãy nhớ xem hướng dẫn từng bước trong video hướng dẫn này để bạn biết chính xác cách cài đặt mã và cách thay đổi để mã hoạt động trên trang web của riêng bạn

Mã này sẽ xóa hình nền, để lại màu đồng nhất phía sau văn bản của bạn

màn hình chỉ @media và (chiều rộng tối đa. 640px){

.section-background img { opacity:0!important }
}

Sau đó, bạn có thể sử dụng mã này để thay thế hình nền của một phần nhất định bằng hình ảnh bạn tải lên trang web của mình. Đảm bảo thay đổi văn bản “url hình ảnh của bạn tại đây” bằng URL cho hình ảnh bạn tải lên tệp tùy chỉnh của mình

Ngoài ra, đừng quên thay đổi 1 trong nth-child(1) để biểu thị số thứ tự của phần bạn muốn thay đổi

 @màn hình chỉ phương tiện và (chiều rộng tối đa. 640px){
#trang. phần trang. con thứ n(1). hình nền phần {độ mờ. 0 }
#trang. phần trang. con thứ n(1). phần-nền {
hình nền. url(your-image-url-here);
background-size. bìa;
vị trí nền. center;
background-repeat. không lặp lại;
}
}

Tải xuống bảng điểm

chủ đề nước muối

Sử dụng mã bên dưới để thay thế hình nền của một phần nhất định bằng hình ảnh bạn tải lên. Đảm bảo thay đổi văn bản “url hình ảnh của bạn tại đây” bằng url cho hình ảnh bạn tải lên. Ngoài ra, đừng quên thay số 4 trong nth-child(4) để thể hiện số thứ tự của phần bạn muốn thay đổi

Nếu thuộc tính width được đặt thành tỷ lệ phần trăm và thuộc tính height được đặt thành "tự động", hình ảnh sẽ phản hồi và tăng tỷ lệ

Lưu ý rằng trong ví dụ trên, hình ảnh có thể được phóng to hơn kích thước ban đầu của nó. Trong nhiều trường hợp, một giải pháp tốt hơn là sử dụng thuộc tính max-width để thay thế

Sử dụng Thuộc tính chiều rộng tối đa

Nếu thuộc tính max-width được đặt thành 100%, hình ảnh sẽ thu nhỏ lại nếu cần, nhưng không bao giờ tăng tỷ lệ lớn hơn kích thước ban đầu của nó

Thêm hình ảnh vào trang web mẫu

Hinh nên

Hình nền cũng có thể đáp ứng với thay đổi kích thước và tỷ lệ

Ở đây chúng tôi sẽ chỉ ra ba phương pháp khác nhau

1. Nếu thuộc tính background-size được đặt thành "chứa", hình nền sẽ chia tỷ lệ và cố gắng khớp với khu vực nội dung. Tuy nhiên, hình ảnh sẽ giữ nguyên tỷ lệ khung hình (mối quan hệ tỷ lệ giữa chiều rộng và chiều cao của hình ảnh)

Đây là mã CSS

Thí dụ

div {
  chiều rộng. 100%;
  chiều cao. 400px;
  hình nền. url('img_flowers. jpg');
  lặp lại nền. không lặp lại;
  kích thước nền. chứa;
  đường viền. 1px màu đỏ đặc;
}

2. Nếu thuộc tính background-size được đặt thành "100% 100%", hình nền sẽ kéo dài để bao phủ toàn bộ khu vực nội dung

Đây là mã CSS

Thí dụ

div {
  chiều rộng. 100%;
  chiều cao. 400px;
  hình nền. url('img_flowers. jpg');
  kích thước nền. 100% 100%;
  đường viền. 1px màu đỏ đặc;
}

3. Nếu thuộc tính background-size được đặt thành "cover", hình nền sẽ chia tỷ lệ để bao phủ toàn bộ khu vực nội dung. Lưu ý rằng giá trị "bìa" giữ tỷ lệ khung hình và một số phần của hình nền có thể bị cắt bớt

Đây là mã CSS

Thí dụ

div {
  chiều rộng. 100%;
  chiều cao. 400px;
  hình nền. url('img_flowers. jpg');
  kích thước nền. bìa;
  đường viền. 1px màu đỏ đặc;
}

Hình ảnh khác nhau cho các thiết bị khác nhau

Một hình ảnh lớn có thể hoàn hảo trên màn hình máy tính lớn, nhưng vô dụng trên một thiết bị nhỏ. Tại sao tải một hình ảnh lớn khi bạn vẫn phải thu nhỏ nó lại?

Đây là một hình ảnh lớn và một hình ảnh nhỏ hơn sẽ được hiển thị trên các thiết bị khác nhau

Thí dụ

/* Đối với chiều rộng nhỏ hơn 400px. */
body {
  hình nền. url('img_smallflower. jpg');
}

/* Đối với chiều rộng 400px và lớn hơn. */
@màn hình chỉ phương tiện và (chiều rộng tối thiểu. 400px) {
  body {
    background-image. url('img_flowers. jpg');
  }
}

Bạn có thể sử dụng truy vấn phương tiện min-device-width, thay vì min-width, để kiểm tra chiều rộng của thiết bị, thay vì chiều rộng của trình duyệt. Sau đó, hình ảnh sẽ không thay đổi khi bạn thay đổi kích thước cửa sổ trình duyệt

Thí dụ

/* Đối với thiết bị nhỏ hơn 400px. */
body {
  hình nền. url('img_smallflower. jpg');
}

/* Đối với thiết bị 400px và lớn hơn. */
@màn hình chỉ phương tiện và (độ rộng tối thiểu của thiết bị. 400px) {
  body {
    background-image. url('img_flowers. jpg');
  }
}

HTMLYếu tố

Phần tử HTML width0 giúp các nhà phát triển web linh hoạt hơn trong việc chỉ định tài nguyên hình ảnh

Cách sử dụng phổ biến nhất của phần tử width0 sẽ dành cho hình ảnh được sử dụng trong thiết kế đáp ứng. Thay vì có một hình ảnh được phóng to hoặc thu nhỏ dựa trên chiều rộng của khung nhìn, nhiều hình ảnh có thể được thiết kế để lấp đầy khung nhìn của trình duyệt một cách độc đáo hơn

Phần tử width0 hoạt động tương tự như phần tử width0 và width0. Bạn thiết lập các nguồn khác nhau và nguồn đầu tiên phù hợp với sở thích là nguồn đang được sử dụng

Làm cách nào tôi có thể làm cho hình nền phản hồi trên tất cả các thiết bị?

Chúng tôi có thể thêm hình nền vào thẻ IMG không?