在图像上定位文本时出现问题

Trouble Positioning Text Over An Image

本文关键字：问题 文本 图像 定位      更新时间：2023-09-26

在学习了我在Stack Overflow上发现的一个优秀教程之后，可以在这里看到：http://fearlessflyer.com/2012/12/how-to-create-a-jquery-image-rotator/

我创造了我自己的，可以在这里看到；http://www.your-adrenaline-fix.com/

我的问题是h2文本有问题。

  1. 当页面第一次加载时，您会短暂地看到所有h2的混乱。我不知道从哪里开始，如果有人不介意评论我如何纠正这一点，我将不胜感激。

  2. 如果我定位文本，使单行文本刚好位于每个图像的底部上方，当脚本到达具有2行文本的图像时，第二行现在远远低于图像，看起来很可怕，但我至少试验了几个小时，似乎无法让文本简单地显示在每个图像的底部附近，无论文本的行数如何。

我只提供了我认为合适的css，然而，如果你需要更多，请在这里查看我的页面来源；视图源：http://www.your-adrenaline-fix.com/或者询问，我很乐意分享。

#featured h2 {
    border:none;
    font-size:41px;
    font-family:Helvetica;
    color:#fff;
    padding:5px;
    margin-bottom:auto;
    text-transform:uppercase;
    height:auto;
    overflow:hidden;
    position:absolute;
    top:310px;
    text-shadow:1px 3px 2px #000;
    text-align:center;
    letter-spacing:-1px;
    width:450px;
}

我提前感谢你们每一个人，Stuart K

您的文本位置是从顶部开始的，这就是为什么它会超出图像，您需要从底部开始定位文本，这样它就不会超出

类似的东西

#featured h2 {
    bottom: 20px;
    // remove top property
}

我只是用底部替换了顶部，并编辑了像素数量。您可以根据需要从这里进行调整。

用于加载页面时的显示问题。您可以先使用js/jquery隐藏h2，然后在页面加载后让它们再次出现。

这是基本结构，我把编码留给你，因为我不确定你对/jsjquery 的了解程度

1） 在css中，隐藏h2标签，这不需要js

2） 在窗口加载时（因此加载图像），显示h2标签

$(window).load(function() {
     // show desired content now
     // you could do transitions here but I will leave that up to you to figure out
     $('#featured .container h2').show(); 
});

更新

你需要在css中以不同的方式设置幻灯片，它现在不起作用，因为你的内容容器中的所有东西都是绝对定位的，这意味着它被从正常流中删除了。这使内容容器的高度为0，这就是为什么文本位于容器上方的原因。我所做的是使图像不是绝对的，这样就给了你的容器一个高度，并应用display none来隐藏它们，因为我们不想一次看到所有的图像。由于您的脚本使用类.current标记当前显示的容器。我们只需要将img作为显示的目标。在容器具有高度的情况下，文本的位置现在被设置为距离容器底部20px，在这种情况下是图像的底部，因为图像是我们在容器中的全部

// only the current slide image will show up
#featured div.container.current img {
    display: block;
}
// remove position absolute and hide the images
#featured div.container img {
    display: none;
    position: absolute; // remove this line
}

更新：

对于h2标签，在css中执行

visibility: hidden;

然后添加

#featured div.container.current h2 {
    visibility: visible;
}

通过这种方式，文本将被隐藏，直到您到达当前图像，看看这是否适用于

相关文章：