Skip to main content

April 24, 2018

2018-4-25 自定义 css 样式调整块级图片标题显示位置

概述

从小书匠 5.7.6 版本开始,小书匠对块级图片生成的 html 结构进行了调整。 将原来的 story_image_caption 放到了 story_image 标签内。通过该修改后,用户可以通过自定义 css 样式时,比较方便的进行标题位置的调整。

旧版本生成的块级图片html片段html hljs    8行
  1. 1<div class="story_image_container story_block_image"> 
  2. 2 <div class="story_image"> 
  3. 3 <img src="./images/1234.jpg" alt="enter description here" title="enter description here" name="images/1524643761548.jpg"> 
  4. 4 </div> 
  5. 5 <br> 
  6. 6 <div class="story_image_caption ">enter description here</div> 
  7. 7</div> 
新版本生成的块级图片html片段html hljs    8行
  1. 1<div class="story_image_container story_block_image"> 
  2. 2 <div class="story_image"> 
  3. 3 <img src="./images/1234.jpg" alt="enter description here" title="enter description here" name="images/1524643761548.jpg"> 
  4. 4 <br> 
  5. 5 <div class="story_image_caption ">enter description here</div> 
  6. 6 </div> 
  7. 7</div> 

自定义 css 样式调整标题位置

几个调整位置的示例

通过自定义 css 样式调整图片标题位置的方式不仅限于下面几种示例方法。如果你对 html, css 比较熟悉,也可以通过 display:flex, display:table 等其他方式来实现,如果使用 display:flex ,也可以不用升级到小书匠 5.7.6 版本,就能实现位置的调整。

将标题置于图片外的上方居中

  1. 1.story_image
  2. 2 padding-top: 40px
  3. 3
  4. 4.story_image_caption
  5. 5 position: absolute; 
  6. 6 top: 0
  7. 7 right: 0
  8. 8 left: 0
  9. 9 border-bottom: 0
  10. 10 text-decoration-style: solid; 
  11. 11 text-decoration-skip: ink; 
  12. 12 text-decoration-line: underline; 
  13. 13

将标题置于图片外的右上方

  1. 1.story_image
  2. 2 padding-top: 40px
  3. 3
  4. 4.story_image_caption
  5. 5 position: absolute; 
  6. 6 top: 0
  7. 7 right: 0
  8. 8 border-bottom: 0
  9. 9 text-decoration-style: solid; 
  10. 10 text-decoration-skip: ink; 
  11. 11 text-decoration-line: underline; 
  12. 12

将标题置于图片外的左上方

  1. 1.story_image
  2. 2 padding-top: 40px
  3. 3
  4. 4.story_image_caption
  5. 5 position: absolute; 
  6. 6 top: 0
  7. 7 left: 0
  8. 8 border-bottom: 0
  9. 9 text-decoration-style: solid; 
  10. 10 text-decoration-skip: ink; 
  11. 11 text-decoration-line: underline; 
  12. 12

将标题置于图片外的左下方

  1. 1.story_image_caption
  2. 2float: left; 
  3. 3

将标题置于图片外的右下方

  1. 1.story_image_caption
  2. 2float: right; 
  3. 3

将标题置于图片内的上方居中

  1. 1.story_image_caption
  2. 2 position: absolute; 
  3. 3 top: 0
  4. 4 right: 0
  5. 5 left: 0
  6. 6 border-bottom: 0
  7. 7 color: #fff
  8. 8 text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000
  9. 9

将标题置于图片内的右上方

  1. 1.story_image_caption
  2. 2 position: absolute; 
  3. 3 top: 0
  4. 4 right: 0
  5. 5 border-bottom: 0
  6. 6 color: #fff
  7. 7 text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000
  8. 8

将标题置于图片内的左上方

  1. 1.story_image_caption
  2. 2 position: absolute; 
  3. 3 top: 0
  4. 4 left: 0
  5. 5 border-bottom: 0
  6. 6 color: #fff
  7. 7 text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000
  8. 8

将标题置于图片内的左下方

  1. 1.story_image_caption
  2. 2 position: absolute; 
  3. 3 bottom: 0
  4. 4 left: 0
  5. 5 border-bottom: 0
  6. 6 color: #fff
  7. 7 text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000
  8. 8

将标题置于图片内的右下方

  1. 1.story_image_caption
  2. 2 position: absolute; 
  3. 3 bottom: 0
  4. 4 right: 0
  5. 5 border-bottom: 0
  6. 6 color: #fff
  7. 7 text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000
  8. 8

将标题置于图片内的下方居中

  1. 1.story_image_caption
  2. 2 position: absolute; 
  3. 3 bottom: 0
  4. 4 left: 0
  5. 5 right: 0
  6. 6 border-bottom: 0
  7. 7 color: #fff
  8. 8 text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000
  9. 9
Tagged with 教程 | 样式 | 小书匠