html - 使用文本而不是图像制作热区图 block (joomla 主题)

Question

我正在使用 rockettheme 的 Joomla 主题，我能够在模板的 demo-styles.less 文件中找到并重现该主题的类。

所以我为我的网站制作了一个 demo-styles-custom.less 并在其中添加了以下代码:

// Demo Image
.al-image {
    position: relative;
}
.al-image img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.2);
}
.al-image object {
    max-width: 100%;
    height: auto;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.2);
}

// MainBottom Images
.al-image-description {
    color: #fff;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index:1000;
    .transition(opacity 0.5s ease-out);
    span {
        margin-top: 25px;
        margin-left: 15px;
        line-height: 0.5em;
    }
    h4 {
        padding: 0 15px;
        margin-top: 15px;
        margin-bottom: 8px;
        font-family: 'SourceSansProExtraLight',Helvetica,Arial,sans-serif;
        font-size: 2.8em;
        font-weight: normal;
        line-height: 1.1em;
    }
    p {
        padding: 0 15px;
        font-size: 1.5em;
    }
    a.readon {
        margin-left: 15px;
        span {
            margin-left: 0;
        }
    }
}
.al-image:hover .al-image-description {
    background-color: rgba(1, 197, 255, 0.3); //#01C5FF
//  color: #FFFFFF;
    bottom: 0;
    opacity: 1 !important;
}

这创建了一个非常漂亮的磁贴，当鼠标悬停在该磁贴上时会显示 al-image-desciption 的内容并显示一个可点击的“阅读更多”按钮。底部的 a.readon 在我使用的 joomla 模板的样式文件中定义，因此无需担心。

无论如何，它与 img 配合使用效果很好，但是如果我想添加一些文本，它就无法正常工作了。我添加了对象参数(在 al-image object{} 处)并创建了文本，但是当悬停时，描述仅涵盖我正在使用的小文本。不是图像占据的整个方形区域。我想我可以添加一个背景图像并将文本放在该图像的顶部，但背景图像的响应与图像不同。它们仅限于文本的大小。结果真的很难看，您可以在下面的附图中看到这一点。

有没有办法让文本使用与图像相同的空间？我希望它像所有其他图像 block 一样工作，只是能够在上面写文本。

(看来我需要10个rep才能发图片所以我只会发链接)

Image 1 When I hovered the tile I want to fix and next to it are the tiles that work ok with plain images

Image 2 when I hovered over one of the tiles that work, (plain images) to show description and not hovered the tile I want to fix

从图像中您可以看到对我不起作用的图 block 具有压缩背景图像。我用来在模块中创建磁贴的 HTML 代码如下:

<div class="al-image">
    <object id="image-with-text" style="background-image: url('/images/Stores/CoverSQ.jpg');">hello all</object>
    <div class="al-image-description">
        <span class="icon-shopping-cart rt-big-icon"></span>
        <h4>Store</br>Renovation</h4>
        <p>fast delivery times</p>
        <a class="readon" href="index.php/en/activities/store-renovation"><span>Read More</span></a>
    </div>
</div>

而对于其余的图 block ，那里使用的代码是:

<div class="al-image">
    <img src="/images/Office_Renovations/CoverSQ.jpg" alt="Office Renovation" />
    <div class="al-image-description">
        <span class="icon-group rt-big-icon"></span>
        <h4>Office</br>Renovation</h4>
        <p>Uninterruptable deploy®</p>
        <a class="readon" href="index.php/en/activities/office-renovation"><span>Read More</span></a>
    </div>
</div>

希望我描述得很好。如果能得到任何帮助，我将不胜感激。谢谢。

Answer 1

我认为如果您只使用 position:absolute;、width: 100%; 和 height: 100%; 就可以解决您的问题> 在您的 object 元素上。并在 al-image 容器上定义宽度和高度……或者只在对象上定义它们。沿着这个 fiddle 的路线: http://jsfiddle.net/WQEAW/