Question

这是一些HTML：

<div class="float">
    <img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />
    <img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />
    <img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>

这一切都使用这个CSS在页面的一侧对齐：

div.float
{
    border-right: 1px solid orange;
    position: absolute;
    z-index: 2;
    margin-left: 5px;
    margin-top: 5px;
    float: left;
    width: 200px;
}

div.mask
{
    position: relative;
    z-index: 1;
    margin-top: 5px;
    float: left;
    width: 206px;
    height: 805px;
    background-color: white;
}

img.left
{
    z-index: inherit;
    margin-bottom: 3px;
    float: left;
    width: 200px; 
    min-height: 200px; /* for modern browsers */
    height: auto !important; /* for modern browsers */
    height: 200px; /* for IE5.x and IE6 */
    opacity: 0.4;
    filter: alpha(opacity=40);
}

img.left:hover
{
    opacity: 1;
}

基本上，这样做是在页面左侧放置一列图片。没什么大不了。但是，我需要每张专辑封面的图片都有专辑封面。这些专辑标题的外观如下：带有白色文字的橙色矩形。然后将其垂直居中于img上。问题是每个图像都有不同的高度，所以我需要将这些标题与img特定对齐。

此外，作为附加组件，我创建了一个渐变，使第一个图像的顶部淡入白色，最后一个图像的底部淡入白色。当您将鼠标悬停在淡入淡出上时，图像将开始使用jquery滚动。这里的问题是，当页面调整大小时，我无法将这些渐变留在固定位置并切断图像的底部和顶部。我会附上它的外观图像。

另一个问题，专辑标题应该是90％的不透明度。图像的不透明度应为40％。将鼠标悬停在图像上可将图像更改为100％不透明度，将albumTitle更改为30％不透明度。将鼠标悬停在albumTitle上应具有相同的效果。我不知道如何解决这个问题。

Answer 1

对于第一部分：您可以使用jQuery动态集中标题。

http://jsfiddle.net/p7GzB/6/

如果没有jQuery，你可能不得不使用容器div，以及垂直居中标题的跨浏览器解决方案。

我可以垂直和可变地将<div>放在<img/>上吗？</div>

1 个答案: