Home / Questions / 31096
Accepted
Cidius
Asked: 2020-11-02 08:27:24 +0800 CST 2020-11-02 08:27:24 +0800 CST

如何修改轮播的标题，以便将文本视为图像标题

  • 772

我想添加一种标题，具体取决于照片是否包含描述。

这将是一个例子：

在此处输入图像描述

我想出的是使用标题并尝试用 css 触摸它以实现我的目标

<div id="mi-carousel" class="carousel slide">        

          <!-- Contenedor de los Slide -->
        <div class="carousel-inner">

                @foreach($articulo->imagenes as $index => $imagen)          
                    <div class="item @if($index == 0) active @endif">
                        <img src="{{ asset('img/articulos/'.$imagen->nombre) }}" alt="" class="img-responsive">
                        @if($imagen->descripcion != "")
                            <div class="carousel-caption hidden-xs hidden-sd caption-articulo">
                                <h4>
                                    {{ $imagen->descripcion }}
                                </h4>   
                            </div>
                        @endif
                    </div>                 
                @endforeach
        </div>
        @if($articulo->imagenes->count() > 1)
          <!-- Controloles -->
          <a class="left carousel-control" href="#mi-carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Anterior</span>
          </a>
          <a class="right carousel-control" href="#mi-carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Siguiente hidden-xs hidden-sd</span>
          </a>
        @endif
    </div>

在 .css 中

.caption-articulo {
 top: auto;
 bottom: 0;
 background: #B984B3;;
}

有了这个我设法把它放下，但我在 css 上有一个重要缺陷，我不知道如何做才能实现类似于图像的东西

css

1 Answers

  1. Best Answer

    查看演示

    html:

    <div id="image-box">
   <img src="http://placehold.it/300.png/09f/fff">

   <!-- Si tiene titulo agregar esto -->
   <p id="caption">Foto titulo</p>
 </div>

    css

    #image-box{
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}


#caption {
  width: 100%;
  color: #fff;
  margin: 0;
  padding: 5px;
  background-color: rgba(0,0,0,.5); /* asignar el color y  transparencia */
  position: absolute;
  bottom: 0;
}
    • 0