Flexslider 标题显示在下方而不是图像顶部

Posted 2023-03-06

【中文标题】Flexslider 标题显示在下方而不是图像顶部

【英文标题】：Flexslider captions showing below not on top of image

【发布时间】：2013-03-12 18:43:19

【问题描述】：

我之前在 *** 上看到过这个问题，但找不到准确的答案。我只希望字幕覆盖在我的图像上。相反，它们似乎只是落在下面。我假设这可能是一个定位问题，但找不到任何其他可以查明问题的资源。我想我会在这里问。提前感谢您的时间。 下面是 CSS、html 和 javascript 和 jQuery。我已按照 Flexslider 的说明进行安装。

CSS

    .flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  outline: none;
.slides,
.flex-control-nav,
.flex-direction-nav margin: 0; padding: 0; list-style: none; 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider margin: 0; padding: 0;
.flexslider .slides > li display: none; -webkit-backface-visibility: hidden; /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img width: 100%; display: block;
.flex-pauseplay span text-transform: capitalize;

/* Clearfix for the .slides element */
.slides:after content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; 
html[xmlns] .slides display: block; 
* html .slides height: 1%;

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child display: block;


/* FlexSlider Default Theme
*********************************/
.flexslider margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;
.flex-viewport max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;
.loading .flex-viewport max-height: 300px;
.flexslider .slides zoom: 1;

.carousel li margin-right: 5px


/* Direction Nav */
.flex-direction-nav *height: 0;
.flex-direction-nav a width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;
.flex-direction-nav .flex-next background-position: 100% 0; right: -36px; 
.flex-direction-nav .flex-prev left: -36px;
.flexslider:hover .flex-next opacity: 0.8; right: 5px;
.flexslider:hover .flex-prev opacity: 0.8; left: 5px;
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover opacity: 1;
.flex-direction-nav .flex-disabled opacity: .3!important; filter:alpha(opacity=30); cursor: default;

/* Control Nav */
.flex-control-nav width: 100%; position: absolute; bottom: -40px; text-align: center;
.flex-control-nav li margin: 0 6px; display: inline-block; zoom: 1; *display: inline;
.flex-control-paging li a width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
.flex-control-paging li a:hover  background: #333; background: rgba(0,0,0,0.7); 
.flex-control-paging li a.flex-active  background: #000; background: rgba(0,0,0,0.9); cursor: default; 

.flex-control-thumbs margin: 5px 0 0; position: static; overflow: hidden;
.flex-control-thumbs li width: 25%; float: left; margin: 0;
.flex-control-thumbs img width: 100%; display: block; opacity: .7; cursor: pointer;
.flex-control-thumbs img:hover opacity: 1;
.flex-control-thumbs .flex-active opacity: 1; cursor: default;

@media screen and (max-width: 860px) 
  .flex-direction-nav .flex-prev opacity: 1; left: 0;
  .flex-direction-nav .flex-next opacity: 1; right: 0;

JQuery 和 Javascript

    <link rel="stylesheet" href="css/flexslider.css" type="text/css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

        <script type="text/javascript" charset="utf-8">
  $(window).load(function() 
    $('.flexslider').flexslider(
          animation: "slide",
          controlsContainer: ".flex-container"
    );
  );

HTML

    <div class="flex-container">
  <div class="flexslider">
    <ul class="slides">
      <li>
        <img src="img/Kemper_Mark.jpg" />
        <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
      </li>
      <li>
        <img src="img/octoberfest.jpg" />
        <p class="flex-caption">This image is wrapped in a link!</p>
      </li>
      <li>
        <img src="img/plat_club.jpg".jpg" />
      </li>
    </ul>
  </div>
</div>

【参考方案1】：

dipak 上面的回答效果很好。我的最终是

.flex-caption 
    position: absolute;
    left: 50;
    right: 50;
    bottom: 0;
    background: rgba(0, 0, 0,0.6);
    z-index: 1;
    padding: 10px;
 

使标题为黑色背景，不透明度为 0.6

我刚刚将它添加到 flexslider.css 的底部

【参考方案2】：

将寻呼机（导航控件）重新定位到右侧，左侧：45%

.flex-control-nav 
  position:absolute;
  right:0;
  left: 45%;
  /* bottom:7.3%; */
  text-align:center;

【参考方案3】：

好像你没有添加 flex-caption css

.flexslider .slides li 
    position:relative;


.flex-caption 
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:#000; /* whatever you want */    
    z-index:1;
    padding:5px;

试试这个也许会奏效... 让我知道它是否有效

【讨论】：

对我来说 position:relative 成功了。我已经有了 .flex-caption 类，但定位不正确。 position:relative on .flexslider .slides li 修复了它