Làm thế nào để tạo nhiều hình nền CSS3 - núm vú

Có thể kết hợp nhiều hình ảnh vào một ảnh duy nhất khi làm việc với các trình duyệt có khả năng tương thích CSS3. Ít nhất một trong những hình ảnh phải có các vùng trong suốt cho phép hình ảnh thứ hai nhìn ra từ phía sau nó. Thủ tục sau đây sửa đổi ví dụ SingleImage để chứa hai hình ảnh. Hình ảnh thứ hai được cung cấp với nguồn có thể tải về là PawPrint. GIF.

Tuy nhiên, bạn có thể dễ dàng thay thế hình ảnh mà bạn thích (miễn là hình ảnh có các vùng trong suốt yêu cầu).

1. Mở SingleImage. Tệp CSS.

2. Chỉnh sửa kiểu cơ thể sao cho thuộc tính hình ảnh nền hiện có hai hình ảnh, như được hiển thị ở đây.

   body {background-image: url ("PawPrint.gif"), url ("CuteCat. Jpg"); màu nền: SaddleBrown; màu sắc: SeaGreen; font-size: x-lớn; text-shadow: 1px 1px Yellow;}
   

   Lưu ý rằng hai mục nhập hình được phân cách bởi dấu phẩy - không nhiều thuộc tính nhiều mục nhập yêu cầu phải có dấu phẩy, nhưng đây là một trong số chúng. Trật tự trong đó hình ảnh xuất hiện cũng rất quan trọng. Hình ảnh chứa minh bạch phải xuất hiện đầu tiên bởi vì nó xuất hiện trên đầu hình ảnh thứ hai. Nếu bạn đảo ngược các mục, hình ảnh thiếu minh bạch sẽ được trên đầu trang và bạn sẽ chỉ thấy một hình ảnh.

3. Lưu tệp CSS dưới dạng MulitpleImage. CSS.

4. Mở SingleImage. Tệp HTML.

5. Sửa đổi các thẻ và để chúng trông như thế này:

   Bối cảnh của nhiều ảnh
   

6. Lưu tệp HTML dưới dạng nhiều trang. HTML.

7. Tải trang MultipleImage.

   Bạn nhìn thấy nền. Lưu ý cách paw in chồng lên hình ảnh ban đầu nhưng không che giấu nó hoàn toàn.