大神,请问轮播图上怎么加标题呀,感谢大神。

257次浏览 更新日期:2023-12-20 22:56:28 分类:问题求助 评论:4

大神,我想把题目放在图片上靠下位置,请问怎么写呀,我试了这两种方法,没实现。

<div class="swiper-slide">

         <a href="<?php echo $v['url'];?>" target="_blank">

         <img src="<?php echo $v['image'];?>" alt="<?php echo $v['title'];?>" title="<?php echo $v['title'];?>" />

         <p>{$v[title]}</p>

         </a>

</div>



<div class="swiper-slide">

         <a href="<?php echo $v['url'];?>" target="_blank">

         <img src="<?php echo $v['image'];?>" alt="<?php echo $v['title'];?>" title="<?php echo $v['title'];?>" />

         </a>

         <p>{$v[title]}</p>

</div>



我来说两句
  • fmh
    fmh 4月前
    @zylmc 谢谢大神
    
    0
    回复
  • zylmc
    zylmc 4月前
    方法一:使用 position 属性
    这是一种常用的方法。首先,给要显示在图片上方的文字所在的元素设置 position: relative 属性,然后再给图片设置 position: absolute 属性。这样,图片就可以覆盖在文字上面。接下来,给图片设置 z-index: -1 属性,使其在堆叠顺序上处于下方,则文字就可以在图片上方展示了。
    示例代码如下:
    <p class="text">
      这是要显示在图片上方的文字。
      <img src="例图.jpg" alt="示例图片" class="pic">
    </p> 
    .text {
      position: relative;
    }
    .pic {
      position: absolute;
      z-index: -1;
    } 
    方法二:使用 ::before 伪元素
    可以使用 ::before 伪元素来让文字在图片上方。首先,将要显示在图片上方的文字所在的元素设置为 position: relative,然后给该元素的 ::before 伪元素增加 content 属性和 display 属性,再给伪元素添加图片样式。
    示例代码如下:
    <p class="text">这是要显示在图片上方的文字。</p> 
    .text {
      position: relative;
    }
    
    .text::before {
      content: "";
      display: block;
      position: absolute;
      top: -50px; /* 图片位置,可以根据实际情况进行调整 */
      left: 0;
      width: 100%;
      height: 100px; /* 图片大小,可以根据实际情况进行调整 */
      background-image: url(例图.jpg);
      background-size: cover;
      background-position: center;
      z-index: -1;
    } 
    以上两种方法都可以让文字在图片上展示,具体可根据实际情况选择。正文代码可以使用 p 标签,示例代码可以使用
    0
    回复
  • fmh
    fmh 4月前
    @zylmc 谢谢指导
    
    0
    回复
  • zylmc
    zylmc 4月前
    title 图片默示属性,当设置装备摆设后鼠标移动该图片上时表现title设置装备摆设的模式。
    alt 图片刻画属性 当图片不能透露表现时刻,就表示一个“叉”同时显现alt的内容,这也是描写图片是什么内容的一个属性,针对SEO优化设置装备摆设,让搜索引擎懂得这张图片是甚么形式
    你要想让标题在图片上得多学习css
    0
    回复
作者信息
发布见解
发内容 回顶部