概述
从小书匠 5.7.6 版本开始，小书匠对块级图片生成的 html 结构进行了调整。 将原来的 story_image_caption 放到了 story_image 标签内。通过该修改后，用户可以通过自定义 css 样式时，比较方便的进行标题位置的调整。
旧版本生成的块级图片html片段html hljs 8行
- 1<div class="story_image_container story_block_image">
- 2 <div class="story_image">
- 3 <img src="./images/1234.jpg" alt="enter description here" title="enter description here" name="images/1524643761548.jpg">
- 4 </div>
- 5 <br>
- 6 <div class="story_image_caption ">enter description here</div>
- 7</div>
新版本生成的块级图片html片段html hljs 8行
- 1<div class="story_image_container story_block_image">
- 2 <div class="story_image">
- 3 <img src="./images/1234.jpg" alt="enter description here" title="enter description here" name="images/1524643761548.jpg">
- 4 <br>
- 5 <div class="story_image_caption ">enter description here</div>
- 6 </div>
- 7</div>
自定义 css 样式调整标题位置
几个调整位置的示例
通过自定义 css 样式调整图片标题位置的方式不仅限于下面几种示例方法。如果你对 html, css 比较熟悉，也可以通过 display:flex, display:table 等其他方式来实现，如果使用 display:flex ,也可以不用升级到小书匠 5.7.6 版本，就能实现位置的调整。
将标题置于图片外的上方居中
- 1.story_image {
- 2 padding-top: 40px;
- 3}
- 4.story_image_caption {
- 5 position: absolute;
- 6 top: 0;
- 7 right: 0;
- 8 left: 0;
- 9 border-bottom: 0;
- 10 text-decoration-style: solid;
- 11 text-decoration-skip: ink;
- 12 text-decoration-line: underline;
- 13}
将标题置于图片外的右上方
- 1.story_image {
- 2 padding-top: 40px;
- 3}
- 4.story_image_caption {
- 5 position: absolute;
- 6 top: 0;
- 7 right: 0;
- 8 border-bottom: 0;
- 9 text-decoration-style: solid;
- 10 text-decoration-skip: ink;
- 11 text-decoration-line: underline;
- 12}
将标题置于图片外的左上方
- 1.story_image {
- 2 padding-top: 40px;
- 3}
- 4.story_image_caption {
- 5 position: absolute;
- 6 top: 0;
- 7 left: 0;
- 8 border-bottom: 0;
- 9 text-decoration-style: solid;
- 10 text-decoration-skip: ink;
- 11 text-decoration-line: underline;
- 12}
将标题置于图片外的左下方
- 1.story_image_caption{
- 2float: left;
- 3}
将标题置于图片外的右下方
- 1.story_image_caption{
- 2float: right;
- 3}
将标题置于图片内的上方居中
- 1.story_image_caption {
- 2 position: absolute;
- 3 top: 0;
- 4 right: 0;
- 5 left: 0;
- 6 border-bottom: 0;
- 7 color: #fff;
- 8 text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000;
- 9}
将标题置于图片内的右上方
- 1.story_image_caption {
- 2 position: absolute;
- 3 top: 0;
- 4 right: 0;
- 5 border-bottom: 0;
- 6 color: #fff;
- 7 text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000;
- 8}
将标题置于图片内的左上方
- 1.story_image_caption {
- 2 position: absolute;
- 3 top: 0;
- 4 left: 0;
- 5 border-bottom: 0;
- 6 color: #fff;
- 7 text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000;
- 8}
将标题置于图片内的左下方
- 1.story_image_caption {
- 2 position: absolute;
- 3 bottom: 0;
- 4 left: 0;
- 5 border-bottom: 0;
- 6 color: #fff;
- 7 text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000;
- 8}
将标题置于图片内的右下方
- 1.story_image_caption {
- 2 position: absolute;
- 3 bottom: 0;
- 4 right: 0;
- 5 border-bottom: 0;
- 6 color: #fff;
- 7 text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000;
- 8}
将标题置于图片内的下方居中
- 1.story_image_caption {
- 2 position: absolute;
- 3 bottom: 0;
- 4 left: 0;
- 5 right: 0;
- 6 border-bottom: 0;
- 7 color: #fff;
- 8 text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000;
- 9}