Hướng dẫn overlay an image on another image css - chồng một hình ảnh lên một hình ảnh css khác

Xem làm thế nào biểu tượng Facebook nhỏ được định vị ở góc dưới bên phải so với một hình ảnh khác?

Hướng dẫn overlay an image on another image css - chồng một hình ảnh lên một hình ảnh css khác

Làm thế nào tôi có thể làm điều đó bằng cách sử dụng kết hợp HTML/CSS/Rails/Prototype !? Một ví dụ sẽ là tuyệt vời. Có lẽ trong jsfiddle.net.

Rob w

334K80 Huy hiệu vàng785 Huy hiệu bạc670 Huy hiệu đồng80 gold badges785 silver badges670 bronze badges

hỏi ngày 26 tháng 2 năm 2011 lúc 23:15Feb 26, 2011 at 23:15

Hướng dẫn overlay an image on another image css - chồng một hình ảnh lên một hình ảnh css khác

Keruilinkeruilinkeruilin

16.2K33 Huy hiệu vàng107 Huy hiệu bạc174 Huy hiệu đồng33 gold badges107 silver badges174 bronze badges

1

Bạn có thể sử dụng CSS để giải quyết vấn đề.

div {
  position: relative;
  display: inline;
}
.imtip {
  position: absolute;
  bottom: 0;
  right: 0;
}
Hướng dẫn overlay an image on another image css - chồng một hình ảnh lên một hình ảnh css khác

Về cơ bản, tôi đã thực hiện ít nhiều những gì ZDYN nói, chỉ là bạn cần đưa một display: inline vào thùng chứa nếu không thì container div kéo dài toàn bộ chiều rộng.

Malcolm

40.4K11 Huy hiệu vàng68 Huy hiệu bạc91 Huy hiệu Đồng11 gold badges68 silver badges91 bronze badges

Đã trả lời ngày 27 tháng 2 năm 2011 lúc 4:44Feb 27, 2011 at 4:44

Dưới đây là một ví dụ đơn giản sử dụng các div thay vì hình ảnh: http://jsfiddle.net/sqjtr/

Về cơ bản, bạn đặt cả hai hình ảnh của mình vào cùng một thùng chứa. Cung cấp cho container một vị trí không tĩnh (trong ví dụ của tôi, tương đối). Sau đó đưa ra hình ảnh lớp phủ position: absolute và định vị nó theo cách bạn muốn sử dụng bottomright.

Đã trả lời ngày 27 tháng 2 năm 2011 lúc 3:55Feb 27, 2011 at 3:55

ZDYNZDYNzdyn

2.1401 Huy hiệu vàng15 Huy hiệu bạc17 Huy hiệu đồng1 gold badge15 silver badges17 bronze badges

1

Bạn đi đây. Điều này được thực hiện bằng cách sử dụng 2 hình ảnh.

Hướng dẫn overlay an image on another image css - chồng một hình ảnh lên một hình ảnh css khác
Hướng dẫn overlay an image on another image css - chồng một hình ảnh lên một hình ảnh css khác
.parent{ width:200px; height:200px; position:absolute; z-index:0; } .inner{ position:absolute; z-index:1; bottom:0; right:0; }

Kiểm tra ví dụ làm việc tại http://jsfiddle.net/wpwzq/

Đã trả lời ngày 27 tháng 2 năm 2011 lúc 6:00Feb 27, 2011 at 6:00

HusseinhusseinHussein

42K25 Huy hiệu vàng112 Huy hiệu bạc143 Huy hiệu đồng25 gold badges112 silver badges143 bronze badges

1

Thử điều đó:

html, body, .wrapper { height: 100%; }
.wrapper { position: relative; }
.top { height: 15%; background: #222; }
.mid { height: 70%; background: #CCC; }
.bot { height: 15%; background: #777; }
.container { 
    position: absolute;
    background: #FFF; 
    padding: 20px; 
    width: 80%;
    top: 10%;
    left: 50%;
    margin-left: -40%;
    clear: both;
}
.container > div {
    float: left;
    width: 42%;
    height: 250px;
    padding: 1%;
}
.container > div:first-child {
    background: #EEE;
    float: left;
    width: 54%;
}
.container > p {
    position: absolute;
    bottom: -100px;
    right: 0;
    border: 1px solid #EEE;
    width: 50%;
    height: 70px;
}

Some Text Here

IMAGE HERE
DESCRIPTION HERE

Thu thập từ stackoverflow.

Đã trả lời ngày 22 tháng 6 năm 2021 lúc 5:12Jun 22, 2021 at 5:12

Xem câu trả lời của tôi cho câu hỏi này.

Sự khác biệt với tình huống của bạn là bạn không cần bất kỳ JavaScript nào nếu bạn không muốn, bạn chỉ có thể thêm các div vào HTML và đặt chúng hoàn toàn trên đầu các bức ảnh.

Tôi nghĩ rằng cá nhân tôi sẽ thêm các div bằng cách sử dụng JavaScript để họ không làm lộn xộn HTML.

Đã trả lời ngày 26 tháng 2 năm 2011 lúc 23:25Feb 26, 2011 at 23:25

Jeroenjeroenjeroen

Phù bằng vàng 90,4K2121 gold badges113 silver badges132 bronze badges