Question

所以我的问题就是这样;我有一个图像菜单（4张照片的块），我想在每张照片的顶部显示一些文字。我以前做过，但由于某种原因，这一次它的形状都变成了梨形。我不想将图像设置为css中的背景，因为我认为它们是内容并希望它们在标记中。

这是我做过的css：

#club_menu{
position:relative;
padding:1px;
width:99.5%;
height:400px;
/*border: 1px solid #A424A9;*/
}
#club_menu a{
position:relative;
width:295px;    
}
#club_menu a h2{
position:absolute;
top:100px;
left:0;
width:100%;
}
#club_menu h2 span{
color:white;
font:bold 24px/45px Helvetica, sans-serif;
letter-spacing:-1px;
background-color:#A424A9;
filter:alpha(opacity=70);
opacity:0.7;
padding:10px;
}

和HTML：

<div id="club_menu">
            <a href="#">
            <h2><span>Aquum Tuesday</span></h2>
            <img src="<?php bloginfo('template_directory'); ?>/images/menu_aquum.jpg" width="295" height="195" /> 
            </a>
            <a href="#">
            <h2><span>Movida Wednesday</span></h2>
            <img src="<?php bloginfo('template_directory'); ?>/images/menu_movida.jpg" width="295" height="195" />
            </a>
            <a href="#">
            <h2><span>Whisky Thursday</span></h2>
            <img src="<?php bloginfo('template_directory'); ?>/images/menu_whisky.jpg" width="295" height="195" />
            </a>
            <a href="#">
            <h2><span>Jalouse Tuesday</span></h2>
            <img src="<?php bloginfo('template_directory'); ?>/images/menu_jalouse.jpg" width="295" height="195" />
            </a>
            </div>

我现在已经玩了一个多小时了，标签就到处都是。我的图像完美无缺。有些人有CSS的技巧，请赐教。

非常感谢，

Answer 1

尝试添加z-index - http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

从css中，看起来图像没有绝对位于链接对象内部添加#club_menu img {position：absolute;顶：0像素;左：0像素;}

尝试使用（display：block;或者display：inline-block，如果你需要使用彼此内联的块）将链接元素的大小和宽度指定为块，并且位置相对

然后任何子元素（h2，图像）位置都可以绝对指定相对于链接。

您很可能需要将之前关于z-index的答案合并到图像上来获取文本。

将文本放在图像上的问题（CSS，相对定位）

2 个答案: