實現前景圖像效果

Question

我顯示了一些不同寬度和高度的圖像，我希望能夠添加一個或兩個類，例如new或hot，這會添加小疊加星或其他東西。

通常情況下，這可以通過將預期圖像作爲背景製作div來解決，但讓我的圖像全部具有未知尺寸，我會陷入困境，試圖找出如何實現這一點。當前的HTML是結構：<a><img></a>

我正在尋找一個CSS功能，不存在：

img.new { foreground:transparent url('/images/new.png') no-repeat bottom right } 

我真的希望能解決這個沒有數據庫福我的圖像尺寸，以及不使用JavaScript 。但是，如果你有一個優雅的JS/jQuery方法，我就會全神貫注。

Answer 1

我不知道如何這會爲你工作，但如果你可以將該類添加到您的<a>元素，而不是你的<img>：

<a class="new" href="..."><img src="..." alt="alt text"></a> 

這時可以嘗試添加a:after僞元素絕對定位在您<img>，並給予它的覆蓋圖標爲背景圖像：

a.new { 
    display: inline-block; 
    position: relative; 
} 

a.new:after { 
    display: block; 
    position: absolute; 
    content: ''; 
    width: /* width of overlay image or anything you choose */; 
    height: /* height of overlay image or anything you choose */; 
    right: 0; 
    bottom: 0; 
    background: transparent url('/images/new.png') no-repeat; 
} 

有一個有點問題與疊加圖像的定位爲<a>是一個內聯塊，用於定位工作，但你總是可以給它一些bottom偏移量來彌補它。 Here's a fiddle向你展示我的意思。

Answer 2

不知道有關設置的詳情，也有浮現在腦海中，你可以做幾件事情：

1. 使用img.new:after（Some Quirksmode info on it.）。但它確實有一些browser support limitations。如果你不介意一些舊瀏覽器不支持這一點，那麼我推薦這個。我之前使用它的結果很好（如果真的需要的話，你也可以回到IE瀏覽器條件註釋中包裝的JavaScript，因爲IE似乎是不支持它的功能之後的唯一瀏覽器）。
2. 如果您未使用overflow:hidden，則可以將其設置爲圖像，其定位標記或下一個父標記的背景。這當然取決於你的確切設計。

3. 在您的定位標記中使用絕對定位的div或span，並僅在類別爲.new的定位點上顯示。所以，這樣的事情：

   <a class="new"> 
   <span class="newBanner"> 
   <img/> 
   </a> 
   
   <style> 
   
   .newBanner { 
       display: none; 
       position: absolute; 
       top: 0; 
       right: 0; 
   } 
   
   .new .newBanner { 
       display: block; 
   } 
   
   </style> 
   

這最後一個的那種粗糙，很可能需要調整，但關鍵是在造型，特別是.new .newBanner { display: block; }部分。同樣，這在很大程度上取決於您的確切設計，所以您可以給我們提供的信息越多，我們就能給您提供的更好的幫助。