在圖像上添加圖像

我想在圖像上添加圖標。我嘗試以下，但它似乎並沒有工作：在圖像上添加圖像

HTML：

<ul> 
    <li> 
     <div class="icon"> 
      <img src="image.jpg" /> 
     </div> 
    </li> 
</ul>

CSS：

ul{ 
    margin: 0; 
    list-style: none; 
    position: relative;  
} 

.icon{ 
    background : url("icon_quick.gif") no-repeat; 
    border: 1px solid red; 
    z-index: 2; 
    overflow: hidden; 
}

演示： http://jsfiddle.net/tqw4V/

來源

2013-03-03 user1355300

究其原因，z-index的這裏沒有做任何事情，因爲子元素開始相對於父其z-index的位置。如果您希望孩子*落後父母，則必須使用負Z指數。一旦它移到父母身後，你將會遇到各種令人討厭的副作用，例如無法正確捕捉點擊事件。 – cimmanon 2013-03-03 15:17:10

下面是做到這一點的一種方法：http://jsfiddle.net/tqw4V/1/

不幸的是，它需要修改您的標記，但它的作品。這個想法是讓覆蓋圖像成爲一個獨立的元素，您可以將其完全置於您的主要元素上。如果主要元素本身沒有絕對定位，這會更好。

HTML：

<ul> 
    <li> 
     <div class="icon"> 
      <img src="http://farm9.staticflickr.com/8382/8521029804_2c86ab5a18_m.jpg" /> 
      <div class="overlay"></div> 
     </div> 
     </li> 
</ul>

CSS：

ul{ 
    margin: 0; 
    list-style: none; 
    position: relative;  
} 

.icon{ 
    border: 1px solid red; 
    z-index: 2; 
    overflow: hidden; 
} 

.overlay { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    background: url("http://www.joors.com/se_images/icon_quick.gif") no-repeat; 
    z-index: 4; 
} 
}

來源

2013-03-03 14:58:42 jrajav

只需更換圖片。替換他們的位置。笑臉應該去html，另一個去css。然後通過高度和寬度，您可以設置容器的大小。希望我幫了忙。

來源

2013-03-03 14:54:39 divoom12

您可以更好地改變你的HTML，因爲你的背景，這推動它走的頂部增加一個內在的小孩。

HTML

<ul> 
    <li> 
     <div class="icon"></div> 
      <img src="http://farm9.staticflickr.com/8382/8521029804_2c86ab5a18_m.jpg" /> 
     </li> 
</ul>

CSS

ul{ 
    margin: 0; 
    list-style: none; 
    position: relative;  
} 

.icon{ 
    width:100px; height:100px; 
    background : url("http://www.joors.com/se_images/icon_quick.gif") no-repeat; 
    z-index: 2; 
    overflow: hidden; 
    position:absolute; 
}

JSFiddle。

來源

2013-03-03 14:58:46 MarcoK

不需要標記修改。您的內容圖片（繪畫）保留在標記中，裝飾圖片（笑臉）保留在CSS中。

http://jsfiddle.net/tqw4V/6/

ul{ 
    margin: 0; 
    list-style: none; 
    /*position: relative; */ 
} 

.icon{ 
    /*z-index: 2; 
    overflow: hidden;*/ 
    position: relative; 
} 

.icon:before { 
    background: url("http://www.joors.com/se_images/icon_quick.gif") no-repeat; 
    height: 100px; 
    width: 100px; 
    content: ''; 
    position: absolute; 
}

來源

2013-03-03 15:08:11 cimmanon

在圖像上添加圖像

回答

相關問題