我正在使用 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-deciption 的内容并显示一个可点击的“阅读更多”按钮。底部的 a.readon 在我正在使用的 joomla 模板的样式文件中定义，因此无需担心。
无论如何，它与 img 配合得很好，但是如果我想添加一些文本，它就不会那么好用了。我添加了对象参数（在 al-image object{} 处）并创建了文本，但是当悬停时，描述只涵盖了我正在使用的小文本。不是图像占据的整个正方形区域。我想我可以添加一个背景图像并将文本放在该图像的顶部，但背景图像的响应与图像不同。它们仅限于文本的大小。结果真的很丑，你可以在下面的附图中看到。
有没有办法让文本使用与图像相同的空间？我希望它像所有其他图像块一样工作，只是能够在上面写文字。
（看来我需要 10 个代表来发布图片，所以我只会发布它们的链接）
图 1 当我将鼠标悬停在我想要修复的图块上时，它旁边是可以处理普通图像的图块
图 2 当我将鼠标悬停在其中一个可用的图块上时（纯图像）以显示描述，而不是悬停在我要修复的图块上
从图像中您可以看到不适合我的图块具有压缩的背景图像。我用来在模块中创建磁贴的 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>
而对于其余的瓷砖，那里使用的代码是：
<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>
希望我描述得很好。我会很感激我能得到的任何帮助。谢谢你。