Question

我喜欢将标题标题标题放在图像的浮动列表上... 我已经设法做一些jquery来获得和做阳离子但是这个位置或者css不起作用......

也许我的“基础”是错误的......帮助

这是页面：http://pfibco.ca/04-accessoires-fra.php?lang=fra

这就是灵感link

Answer 1

我找到了正确答案here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Make Nice Captions Using Image Alternative Tag</title>
  <style>
    /* Style wrapping elements */
    .caption {position: relative; display: block;}
    .caption div {position: absolute; padding: 5px; bottom: 0; text-align: center; line-height: 150%; color: #ffffff; background: #000000;}
  </style>
</head>

<body>
  <h1>Make Nice Captions Using Image Alternative Tag</h1>
  <img src="path to the image goes here" alt="Here goes the alternative text which pops out on hover" />
</body>

</html>

和/或jquery部分：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  // Wrap up images
  $('img').each(function() {
    $(this).wrap('<div class="caption"></div>').after('<div>' + $(this).attr('alt') + '</div>');
    $('.caption').width($(this).width()).children('div').each(function() {
      $(this).css({width: $(this).siblings('img').width(), opacity: 1, display: 'block'});
    });
  });
});
</script>

Jquery标题样式项

1 个答案: