Question

我想在我正在开发的图像库的图像边框上放置一个标题。基本上我的图像使用边框和边距在它们周围创建效果，使它们看起来像宝丽来照片。我想在边框顶部放置一个标题。这是我的css。

.column img {
    position:relative; 
    display:inline-block; 
    width:130px; 
    height:100px;
    margin: auto; 
    padding:10px; 
    background:#fff; 
    box-shadow:0 0 5px rgba(0,0,0,.35);
    -webkit-box-shadow: 1px 3px 3px rgba(0,0,0,.8);
    -moz-box-shadow: 1px 3px 3px rgba(0,0,0,.8);
    box-shadow: 1px 3px  3px rgba(0,0,0,.8);
    border: 1px solid #fff;
    padding: 5px 5px 35px 5px;
}

.column div {
    max-width: 100%;
    max-height: 100%;
    float: left;
    margin: 0 15px 5px 0;
    margin-left: 5px;
    border-radius: 2px;
    overflow:hidden;
}

边框工作正常并且看起来很好但是标题没有显示在边框的顶部任何帮助都会非常感激。

Answer 1

尝试使用＆lt; fieldset＆gt;和＆lt; legend＆gt;用于在图像周围绘制标题框的标签。 <fieldset> <legend>Caption Here</legend>  </fieldset>

在图像边框上放置标题

1 个答案: