Достижение эффекта переднего плана

Question

Я показываю несколько изображений различной ширины и высоты, и я хотел бы иметь возможность добавить класс или два, скажем new или hot, что добавит небольшую оверлейную звезду или что-то в этом роде.

Обычно это было бы решено путем создания div с предполагаемым изображением, являющимся фоном, но с моими изображениями любого неизвестного размера я застреваю, пытаясь понять, как этого добиться. Текущий HTML имеет структуру: <a><img></a>

Я ищу особенность CSS, что не существует:

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

Я действительно надеюсь, что решить эту проблему без databasing моих размеров изображения, и без использования 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. Если вы не возражаете, что некоторые из старых браузеров этого не поддерживают, я рекомендую это. Я использовал его раньше с хорошими результатами (и вы также можете вернуться к JavaScript, завернутому в условные комментарии IE, если вам действительно нужно, поскольку 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; } части. Опять же, это во многом зависит от вашего точного дизайна, поэтому чем больше информации вы можете нам дать, тем лучше мы сможем вам помочь.