我正在尝试在具有(透明)背景的图片上创建标题标题。到目前为止,我一直很不成功:当添加“内联”和“填充”时,文本会在没有白色背景的情况下移动,并且线条不会保持与一侧对齐(当向左填充时:10px) - 上线得到一个缩进。此外,当标题“中断”时,我更喜欢背景在该行的最后一个单词之后继续 5 像素左右。
到目前为止,我的 html 只是创建了一个与图片宽度相同的标题框。
<div class="img_box"><a title="January travel news" href=""><img src=".../pic.jpg" width="238" height="165"><span class="intro">January travel news</span></a></div>
和CSS
.img_box { position:relative; 显示: block ; 宽度:185px; 高度:122px;
.img_box img
{
width: 185px;
height: 122px;
display: block;
}
.img_box a
{
width: 185px;
height: 122px;
text-decoration: none;}
.img_box a span.intro {
position: absolute;
color: #000;
line-height:12px;
background: #fff;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 3px;
height: 25px;
bottom: 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold; }
最佳答案
试一试:
主要的变化是使 anchor 位置相对。这样做的目的是使其内部的跨度相对于其父项( anchor )定位为绝对位置。
另请看我为它制作的jsfiddle。 http://jsfiddle.net/mLXda/
.img_box img {
width: 185px;
height: 122px;
display: block;
}
.img_box a
{
width: 185px;
height: 122px;
text-decoration: none;
position: relative; /* this is the most important line to add */
}
.img_box .intro {
position: absolute;
color: #000;
background: #eee;
line-height:12px;
background: #eee;
margin: 10px;
padding: 10px;
height: 25px;
bottom: 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
关于html - 带有内联和彩色背景的多线图片说明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9070206/