CSS 在图片下方显示图片标题

Question

after upgrading a CMS, i have the problem, that of thousands articles with images, the caption of the image does not shown below the image.升级 CMS 后，我遇到了问题，即数千篇带图片的文章，图片的标题没有显示在图片下方。

For Example:例如：

<img src="123.jpg" alt="Texttext" class="caption" style="display: block; margin-left: auto; margin-right: auto;" title="Title + Copyright">

What can i do, that the title will be displayed as caption below the image?我能做什么，标题将显示为图像下方的标题？ I have already lot of articles with such images codes and class=caption.我已经有很多带有此类图像代码和 class=caption 的文章。 So it is not possible, to change the html codes.所以不可能更改 html 代码。

But it should be possible to add a CSS, that that caption will be displayed under the image?但应该可以添加一个CSS，那个标题将显示在图像下方？

Example: https://www.hdsports.at/laufkalender-international示例： https://www.hdsports.at/laufkalender-international

i tried to add a css Code, but without success.我尝试添加 css 代码，但没有成功。

Answer 1

as far as I know, that is impossible using CSS. if you can't edit the source code, maybe try injecting some javascript code据我所知，使用 CSS 是不可能的。如果你不能编辑源代码，也许可以尝试注入一些 javascript 代码

anyway, here is a code example of putting every title attribute of an image below it.无论如何，这是一个代码示例，将图像的每个标题属性放在它下面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>put title attribute as caption</title>
</head>
<body>
  <img src="https://picsum.photos/200/300" class= "caption" title="sample title 1">
  <img src="https://picsum.photos/200/300" class= "caption" title="sample title 2"> 
  <img src="https://picsum.photos/200/300" class= "caption" title="sample title 3"> 
  <img src="https://picsum.photos/200/300" class= "caption" title="sample title 4">
</body>

<script>
  // get all images that have caption class
  const images = document.getElementsByClassName('caption')
  Object.keys(images).forEach((key) => { 
    // create paragraph HTML tag. it might be span, div, lists and etc. 
    let caption = document.createElement('p');
    // here, we put the title attribute content into a new element we just created
    caption.textContent = images[key]['title'];
    // and finally, we add the caption after each image  
    images[key].after(caption);
  })
</script>
</html>

Try this on JSFiddle在 JSFiddle 上试试这个

Important: This way you may have SEO issues.重要提示：这样您可能会遇到 SEO 问题。 Google crawlers may not be able to see the captions you just created. Google 抓取工具可能无法看到您刚刚创建的标题。

CSS 在图片下方显示图片标题

问题描述

1 个解决方案

解决方案1
1 2022-12-10 18:29:09

CSS 在图片下方显示图片标题

问题描述

1 个解决方案

解决方案1 1 2022-12-10 18:29:09

解决方案1
1 2022-12-10 18:29:09