如何显示具有相关标题的背景图像

Posted 2023-05-08

【中文标题】如何显示具有相关标题的背景图像

【英文标题】：How can I show a background image with its associated title

【发布时间】：2021-10-11 06:59:45

【问题描述】：

我有一个关于如何在我的网站上显示多个不同背景图像（不是幻灯片，而是页面特定背景）以及每个图像特定的图像标题/信用行文本的问题？

我可以确定文本的位置，但不知道如何更改每个新图像的文本。

这是我目前所拥有的：

#header #headerbanner 
  float: right;
  width: 468px;
  margin: 30px 0 10px 0;
  text-align: left;
  padding: 10px;
  background: font-size: .8em;
  line-height: 1.5em;


#header #headerbanner h3 
  font-size: 1.1em;
  font-family: "Lucida Grande", "Lucida Sans 
 Unicode",Verdana,Arial,Helvetica,sans-serif;



#header #headerbanner p a 
  border-bottom: 1px dashed #a8ef9d;


#header #headerbanner a:hover 
  background: url(images/blacktrans.png);

<div id="headerbanner" class="widget widget_block widget_text">
  <p>Image: Eildon Hills, Scottish Borders</p>
</div>

提前致谢。

S

【问题讨论】：

欢迎来到 SO。请在help centre 中选择tour 以查看how to ask a good question。如果您不提供任何代码，我们将无法为您提供帮助 - 请参阅如何创建 minimal reproducible example

请添加您目前所做的代码

完成阿宾。毫无疑问，您会看到，我是设计师而不是程序员！

您的 CSS 使用固定的背景图片（即背景图片不会随着时间或页面重新加载而改变）。因此，将文本也固定好是完全可以的。如果您的页面在用户重新加载时或基于时间应该具有不同的背景，则需要一些代码来更改图像和文本。两者都将以类似的方式完成。与您的编码员联系以获得一些帮助。

【参考方案1】：

我会使用一些 javascript 来始终移动到下一个图像/文本：

setInterval(nextImage, 10000);

function nextImage() 
  // Repeats every 5 seconds

在此函数之前，只需使用 ID 和 JavaScript getElementById 函数选择图像和文本元素。

<p id="text"></p>
<img id="img"></img>
text = document.getElementById('text');
img = document.getElementById('img');

并在这个函数中设置这些元素的内容

text.innerhtml = "Your Authors Name";
img.style.background = "url(newUrl/)";

在函数中，您还应该使用包含所有名称和图像的数组。还有一个柜台和

if(counter>=imgArray.length) 
   counter=0;
 else 
   counter++;

并使用计数器在当前位置显示文字和图像。

【讨论】：

听起来像是一个很好的答案 Jorit。我将在哪里应用此代码？另外，如果可能的话，我需要在导航到新页面时更改图像/文本吗？

如果您在 jsfiddle.net 上设置您的项目，我可以为您提供最好的帮助，这样我就可以查看并使用 cmets 进行更改 :)

Hy Jorit 这里是 jsfiddle.net 的链接：jsfiddle.net/soutra/L8zp3ktf/1/#&togetherjs=75Uy59qq7b

我无法访问 html，因为它是 wordpress 主题。