Văn bản trong hình ảnh css

- Việc thiết lập hình nền cho phần tử không phải chỉ có thể sử dụng duy nhất một tấm ảnh, ta có thể sử dụng nhiều tấm hình bằng cách sử dụng nhiều url giá trị() (tấm hình nào được khai báo trước đó thì nó sẽ

---

        
        
        
    
    
    Tài liệu học Lập Trình Web
    

Xem ví dụ

- Lưu ý. Việc sử dụng nhiều tấm hình để thiết lập hình nền cho phần tử chỉ thích hợp khi các tấm hình đó thuộc định dạng GIF hoặc PNG (loại hình ảnh có một số vị trí trong suốt). Nếu sử dụng loại hình không có phần trong suốt, thì nó sẽ đảo ngược hoàn toàn lên tấm bên dưới, tấm bên dưới không được hiển thị

---

        
        
        
    
    
    Tài liệu học Lập Trình Web
    

Xem ví dụ

3. 2) Hình nền kết hợp với màu nền

- Nếu bạn thiết lập hình nền cho phần tử bằng loại hình ảnh có một số vị trí trong suốt, thì khi đó bạn có thể sử dụng kết hợp với thuộc tính màu nền để thêm màu nền vào những vị trí trong suốt, làm

---

        
        
        
    
    
    
Tài liệu hướng dẫn học Lập Trình Web
    

Xem ví dụ

4) Giới thiệu sơ lược về "sự lặp lại của hình nền"

- Mặc định, hình nền sẽ xuất phát từ vị trí góc "phía trên - bên trái" của phần tử

- Nếu hình ảnh được sử dụng để làm hình nền cho phần tử có kích thước nhỏ hơn kích thước của phần tử thì hình nền sẽ tự động được lặp lại để lấp đầy diện tích của phần tử (Xem ví dụ)

- Chúng ta có thể thiết lập lặp lại của hình nền (lặp lại, không lặp lại, chỉ lặp theo chiều ngang, chỉ lặp theo chiều dọc,. ) bằng cách sử dụng thuộc tính lặp lại nền trong CSS

Đầu tiên là căn giữa chữ viết (TEXT)

Ví dụ. Chữ CAODEM. COM được căn giữa trang web

CAO ĐÊM. COM

CAODEM.COM

Mã css căn giữa các chữ viết như sau

.text{text-align: center;}

Căn giữa thẻ DIV

Ví dụ. Thẻ div màu đỏ bao quanh nội dung được căn giữa trong thẻ màu xanh

Nội dung

Mã css căn giữa thẻ DIV như sau

.cangiua{margin:0 auto}

Căn giữa hình ảnh (IMAGES)

Ví dụ. Logo Đêm Đêm được căn giữa trang

2. Giãn các hình ảnh với object-fit
chứa, bao gồm, điền vào các giá trị đều quen thuộc, chúng tôi sử dụng chúng cho thuộc tính kích thước nền để kiểm tra cách một hình nền điền vào phần tử của nó thuộc về. Thuộc tính object-fit tương đối giống với nó, vì nó cũng xác định cách kích thước hình ảnh bên trong vùng chứa của nó
Giá trị chứa hình ảnh trong vùng chứa của nó. bìa không giống nhau, nhưng nếu tỷ lệ hình ảnh và vùng chứa không khớp, hình ảnh sẽ bị cắt bớt. fill doing for image to tension and fill into container. scale-down select phiên bản nhỏ nhất của hình ảnh để hiển thị




  


#container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
3. Change the image with object-position
Tương tự như thuộc tính bổ sung vị trí nền cho kích thước nền, cũng có thuộc tính vị trí đối tượng cho phù hợp với đối tượng
Thuộc tính object-fit di chuyển một hình ảnh bên trong một bộ chứa hình ảnh đến các định mức cao nhất. Các tọa độ có thể được định nghĩa là các đơn vị độ dài tuyệt đối, các đơn vị chiều dài tương đối, các từ khóa (trên, trái, giữa, dưới và phải), hoặc sự hợp nhất hợp lệ của chúng ( 

  


#container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-position: 150px 0;
}
4. Vị trí hình ảnh với vertical-align
Thỉnh thoảng chúng tôi thêm 

5. Shadow shape with filter. bóng đổ ()

Khi được sử dụng không chú ý trong văn bản và hộp, bóng tối có thể thêm sự sống vào một trang web. Điều này cũng đúng với hình ảnh. Hình ảnh có dạng lõi và nền trong suốt có thể có lợi từ bộ lọc CSS thả bóng. Các đối số của nó tương tự như các giá trị của thuộc tính CSS liên quan đến bóng (text-shadow, box-shadow). Hai phần đầu tiên của biểu tượng khoảng cách Dọc và ngang giữa các bóng và hình ảnh, thứ ba và thứ tư là Độ mờ và bán kính phân tán của bóng, và màu cuối cùng là bóng màu

Giống như text-shadow, drop-shadow cũng tạo ra một cái bóng được đúc khuôn cho các đối tượng thuộc sở hữu. Vì vậy, khi nó được áp dụng cho một hình ảnh, bóng sẽ có dạng của phần hình ảnh được nhìn thấy.