Tôi làm cách nào để che phủ hình ảnh (png) trong một trang web?

Question

Tôi đang cố gắn hình ảnh ở giữa hình ảnh khác (hơi lớn hơn) để hình ảnh có vẻ nằm trong hình ảnh lớn hơn (điện thoại trong trường hợp này). Tôi không chắc chắn về cách thích hợp để thực hiện điều này và bất kỳ sự giúp đỡ nào cũng được đánh giá cao!

Answer 1

Bạn cần đặt thuộc tính css z-index.

HTML:

<img id="png1" src="png1.png" /> 
<img id="png2" src="png2.png" /> 

CSS:

#png1 { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:0; 
} 

#png2 { 
    position:absolute; 
    /* 
    set top and left here 
    */ 
    z-index:1; 
} 

Dưới đây là một bản demo: http://jsfiddle.net/AlienWebguy/6VSBv/

Answer 2

<img style="position:absolute;left:10px;top:10px;" src="img1.png"> 
<img style="position:absolute;left:20px;top:20px;" src="img2.png"> 

Tất nhiên, bạn sẽ cần phải điều chỉnh tọa độ, và tôi rất muốn giới thiệu đặt CSS trong biểu định kiểu thay vì nội dòng. Dưới đây là hướng dẫn khá tốt về CSS để biết thêm thông tin: http://www.csstutorial.net/

Answer 3

Vì vậy, bạn mới sử dụng html và CSS. Đó là không có vấn đề, nhưng câu hỏi của bạn là một chút mơ hồ cho SO's general format.

Tuy nhiên, trong một nutshell:

<style> 
    #phone {background: url('http://www.knowabouthealth.com/wp-content/uploads/2010/06/iphone.jpg') center no-repeat; width: 300px; height: 392px; border: 1px solid #000000;} 
    #display {background: #000000; margin: 80px auto 0px; width: 164px; height: 246px; color: #FFFFFF;} 
</style> 
<div id="phone"> 
    <div id="display"> 
     Hello! What is up? Miley rocks! 
    </div> 
</div> 

Sống dụ: http://jsfiddle.net/cbn4L/

Điều này tất nhiên là một ví dụ cực kỳ đơn giản. Và như bạn có thể thấy các thùng chứa bên trong không phải là một hình ảnh, nhưng văn bản .. Về mặt kỹ thuật bạn có thể thêm một hình ảnh bây giờ .. nhưng như chúng tôi đang giúp bạn trong thế giới của HTML & CSS, thì đây là một ví dụ tốt hơn và có thể có thể nâng cao ý tưởng của bạn :)