Css tạo chồng chéo hình ảnh

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. ? . It may in jsfiddle. mạng lưới

cướp w

334K80 Huy hiệu vàng785 Huy hiệu bạc670 Huy hiệu đồng80 huy hiệu vàng785 huy hiệu bạc670 huy hiệu đồng

hỏi ngày 26 tháng 2 năm 2011 lúc 23. 15 26/02/2011 lúc 23. 15

Keruilinkeruilin keruilin

16. 2K33 Huy hiệu vàng107 Huy hiệu bạc174 Huy hiệu đồng33 huy hiệu vàng107 huy hiệu bạc174 huy hiệu đồng

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;
}

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 có 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 huy hiệu vàng68 huy hiệu bạc91 huy hiệu đồng

Đã trả ngày 27 tháng 2 năm 2011 lúc 4. 44 27 tháng 2 năm 2011 lúc 4. 44

Dưới đây là một ví dụ đơn giản sử dụng div thay vì hình ảnh. http. //jsfiddle. mạng/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 vùng chứa 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 bottom và right

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

ZDYNZDYN zdyn

2. 1401 Huy hiệu vàng15 Huy hiệu bạc17 Huy hiệu đồng1 huy hiệu vàng15 huy hiệu bạc17 huy hiệu đồng

1

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

    

    



.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. mạng/wpwzq/

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

Husseinhussein Husseinhussein

42K25 Huy hiệu vàng112 Huy hiệu bạc143 Huy hiệu đồng25 huy hiệu vàng112 huy hiệu bạc143 huy hiệu đồng

1

Attempt that

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. 12 22 tháng 6 năm 2021 lúc 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 vấn đề 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

Giờ đây, bạn có thể đặt tùy chọn hiển thị hướng dẫn dọc và chọn thời điểm hiển thị hướng dẫn trực quan - Tự động hiển thị hướng dẫn, Luôn hiển thị hướng dẫn và Không bao giờ hiển thị hướng dẫn. Theo mặc định, Lưới được đặt thành Luôn hiển thị hướng dẫn

Bạn cũng có khả năng thay đổi Màu sắc và Độ mờ của hướng dẫn trực quan và số lượng dòng tạo nên hướng dẫn. Tùy chọn Mật độ đặt số lượng đường xuất hiện giữa mỗi đường Split Warp. Theo mặc định, Mật độ được đặt thành 2