多个图片里显示固定标题文字和背景条?代码如何修改?

下面这个代码里:  

现在多个图片里显示是,只有文字,没有背景条,如图片:


这个图1里 有二个方面要修改,一是标题文字没有固定的背景条,2是,四个图上下,没有空位,不知那个代码位里修改一下?改5像素,跟左右二个图片中间一样.

这个二图里:  就是想体现的效果.

1.就像一马当先这个图一样,那个标题背景条这样固定显示出来. 标题文字和背景条是固定的.
2.上下图,就像那条红色的线条一样,那个部分也是有5像的空间?
3.当鼠标一移上去标题文字就会显示下划钱,

下面的代码如何修改?修改那一些?

最下面的代码里应该如何 修改一下??谢谢
--------------------------------------------------------------------------------------------

<style type="text/css">
.vk_pic_list_1_10 { }
.vk_pic_list_1_10 li {  position:relative; float: left;  margin: 0 5px 0px 0px; }
.vk_pic_list_1_10 li img {background: #fff; border: 0px solid #333;/* -moz-border-radius:5px; -webkit-border-radius:5px; border-radius: 5px; box-shadow: 1px 1px 3px #afafaf; */cursor: pointer; }
.vk_pic_list_1_10 li:hover img { border-color:#000; }
.vk_pic_list_1_10 em  { display: block; position:absolute; left:0px; bottom:5px; width:100% ; height:38px ; text-indent:5px; line-height:38px; font-size:15px;  color:#fff; overflow:hidden; }
.vk_pic_list_1_10 li:hover em  { display: block; }
.ie7 .vk_pic_list_1_10 span, .ie7 .vk_pic_list_1_10 em  { bottom:0px; }

.vk_pic_list_1_10 li:hover em { background-color:#001F28; color:#fff; text-decoration:none; opacity:8.0;filter:alpha(opacity=80);  }
.vk_pic_list_1_10 em:hover { color:#fff; text-decoration:none; opacity:8.0;filter:alpha(opacity=80);  }
</style>
<div class="vk_pic_list_1_10 cl">
<ul>
[loop]
<li style="width: {picwidth}px;">
<a href="{url}" target="_blank"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /> <em>{title}</em> </a>
</li>
[/loop]
</ul>
</div>

<style type="text/css">
.vk_pic_list_1_10 { }
.vk_pic_list_1_10 li {  position:relative; float: left;  margin: 0 5px 5px 0px; }
.vk_pic_list_1_10 li img {background: #fff; border: 0px solid #333;/* -moz-border-radius:5px; -webkit-border-radius:5px; border-radius: 5px; box-shadow: 1px 1px 3px #afafaf; */cursor: pointer; }
.vk_pic_list_1_10 li:hover img { border-color:#000; }
.vk_pic_list_1_10 em  { display: block; position:absolute; left:0px; bottom:5px; width:100% ; height:38px ; text-indent:5px; line-height:38px; font-size:15px;  color:#fff; background:#000; overflow:hidden; }
.vk_pic_list_1_10 li:hover em  { display: block; }
.ie7 .vk_pic_list_1_10 span, .ie7 .vk_pic_list_1_10 em  { bottom:0px; }

.vk_pic_list_1_10 li:hover em { background-color:#001F28; color:#fff; text-decoration:none; opacity:8.0;filter:alpha(opacity=80);  }
.vk_pic_list_1_10 em:hover { color:#fff; text-decoration:none; opacity:8.0;filter:alpha(opacity=80);  }
</style>
<div class="vk_pic_list_1_10 cl">
<ul>
[loop]
<li style="width: {picwidth}px;">
<a href="{url}" target="_blank"><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /> <em>{title}</em> </a>
</li>
[/loop]
</ul>
</div>

谢谢,已解决.

deviljing 发表于 2014-3-26 01:23
.vk_pic_list_1_10 { }
.vk_pic_list_1_10 li {  position:relative; float: left;  margin: 0 5px 5px  ...

你好, 如何把那个 固定的背景条 透明一些呢?或是 透到百分50 ,数值可以调整?   我用了这个代码后,效果是出来,但是,固定的背景条不会透明,那么图片就会变的好像挡住了.  划过出来的背景条就没有问题

.vk_pic_list_1_10 em  { display: block; position:absolute; left:0px; bottom:5px; width:100% ; height:38px ; text-indent:5px; line-height:38px; font-size:15px;  color:#fff; background:#000; overflow:hidden; opacity:8.0;filter:alpha(opacity=80);}

deviljing 发表于 2014-3-26 13:11
.vk_pic_list_1_10 em  { display: block; position:absolute; left:0px; bottom:5px; width:100% ; height ...

.vk_pic_list_1_10 em  { display: block; position:absolute; left:0px; bottom:5px; width:100% ; height:38px ; text-indent:5px; line-height:38px; font-size:15px;  color:#fff; background:#000; overflow:hidden; opacity:8.0;filter:alpha(opacity=80);}


你好,就是这个代码里,如何把固定背景条里设为半透明,这样通个背景条能看到图片.

不是给你加了透明了吗

本DZ系统 : 1.

IE8 IE10 都没有效果呢.如果有效果,就不会在这里花时间,大家研究了.你说是吧.
看我上面剪的图, 实现不了.


本DZ系统:2.

那个自带的幻灯图片功能,能半透明 .多好. 要是能实现像这样多好.




像这样多好.

请帮忙