css 在图像下方显示图像标题

kgqe7b3p 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(196)

在升级了一个CMS之后，我遇到了一个问题，在成千上万篇带有图像的文章中，图像的标题没有显示在图像下面。
例如：

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

我能做什么，标题将显示为标题下面的图像？我已经有很多文章与这样的图像代码和类=标题。所以它是不可能的，改变html代码。
但它应该可以添加一个CSS，该标题将显示在图像下？
示例：https://www.hdsports.at/laufkalender-international
我试着添加一个CSS代码，但没有成功.

css

来源：https://stackoverflow.com/questions/74749160/css-show-image-title-below-image

1条答案

按热度按时间

58wvjzkj1#

据我所知，这是不可能的使用CSS.如果你不能编辑源代码，也许尝试注入一些javascript代码
无论如何，这里是一个代码示例，将图像的每个title属性都放在它下面。

<!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
重要提示：这样你可能会遇到搜索引擎优化问题。谷歌爬虫可能无法看到你刚刚创建的标题。

赞(0）回复(0）举报 2022-12-15

我来回答

css 在图像下方显示图像标题

1条答案

相关问题

热门标签

最新问答