Question

我有一个显示图像的旋转木马。其中一些是youtube视频的大拇指，在这种情况下，我希望在拇指图像上显示一个播放按钮的图像，以显示它是一个视频而不是一个简单的图像。

<div class="carousel-inner">
            @foreach($realisation->images as $key => $img)
                @if($img->type == 'image')
                <div class="item {{ $key == 0 ? 'active': '' }}"> 
                    @if(File::exists($img->image))
                        <img src="{{asset($img->image)}}" class="image" alt="realisation{{$img->id}}"/> 
                    @endif
                </div>
                @else
                <div class="item {{ $key == 0 ? 'active': '' }}"> 
                    <a href="{{$img->video}}"  data-lity>
                        <img src="{{ LaravelVideoEmbed::getYoutubeThumbnail($img->video) }}" class="image" alt="realisation{{$img->id}}">
                        <img src="{{asset('img/icon-14-orange.png')}}"  alt="">
                    </a>  
                </div>
                @endif
            @endforeach
        </div>

Answer 1

更改您的代码，为播放图片添加课程class="playOverlay"：

    .....
    @else
       <div class="item {{ $key == 0 ? 'active': '' }}"> 
          <a href="{{$img->video}}"  data-lity>
              <img src="{{ LaravelVideoEmbed::getYoutubeThumbnail($img->video) }}" class="image" alt="realisation{{$img->id}}">
              <img class="playOverlay" src="{{asset('img/icon-14-orange.png')}}"  alt="">
         </a>  
      </div>
  @endif
    .....

的CSS：

.item{position:relative}
img.playOverlay{
   position:absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

在另一个图像上显示图像

1 个答案: