Php 图像中的虚拟图像标题 我试图在图像中间移动“图像标题”,但它似乎不起作用。
Php 图像中的虚拟图像标题 我试图在图像中间移动“图像标题”,但它似乎不起作用。,php,html,css,joomla,virtuemart,Php,Html,Css,Joomla,Virtuemart,<div class="product-field product-field-type-R"> <span class="product-field-display"> <a title=" Image Title" href="index.php/eshop/category/someproduct-detail"> <img alt="getimagedpmk4xtm" sr
<div class="product-field product-field-type-R">
<span class="product-field-display">
<a title=" Image Title" href="index.php/eshop/category/someproduct-detail">
<img alt="getimagedpmk4xtm" src="/images/stories/virtuemart/product/resized/getimage_90x90.jpg"></img>
</a>
</span>
</div>
我知道这是错误的,但我无法提醒自己我还做了哪些其他尝试。你可以用CSS3设置锚标题的样式,如下所示,这只是hover上的一个示例,你现在可以轻松设置样式:
a[title]:hover:after{
content: attr(title);
width:100px;
position:absolute;
left:10px;
top:20px;
word-wrap: break-word;
z-index: 20px;
}
可以将图像设置为div的背景图像,并将文本放置在div中 例如:
<div style="background-image:/images/stories/virtuemart/product/resized/getimage_90x90.jpg;">
<span style="margin:10px;">
<a title=" Image Title" href="index.php/eshop/category/someproduct-detail"/>
</span>
</div>
这只是在图像中间显示文本的一种简单方式。请先尝试我的示例代码。我无法检查它的语法
希望我能帮助您。您可以使用
行高
并将其设置为与图像相同的高度。
<div style="background-image:/images/stories/virtuemart/product/resized/getimage_90x90.jpg;">
<span style="margin:10px;">
<a title=" Image Title" href="index.php/eshop/category/someproduct-detail"/>
</span>
</div>