为什么 overflow-hidden in tailwind css 仍然出现在其他元素的前面
Why overflow-hidden in tailwind css still appear in front of other element
我使用变换创建了一个简单的图像布局。我已经将 overflow-hidden class 添加到父 div 但缩放图像溢出仍然出现在上面的图像前面。如何防止溢出图片出现在上图前面？
<div class="flex" style="height: 50vh">
<a href="#" class="flex-1 bg-gray-400 relative overflow-hidden">
<img class="object-cover origin-center h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1519638399535-1b036603ac77?ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" alt="">
</a>
<a href="#" class="flex-1 bg-gray-400 overflow-hidden">
<img class="object-cover h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<div class="flex-1 bg-gray-400 relative overflow-hidden">
<a href="#" class="w-1/4 bg-gray-400 overflow-hidden relative">
<img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="w-1/4 bg-gray-400 overflow-hidden">
<img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 origin-center transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
<div class="flex-1 bg-gray-400 overflow-hidden">
<a href="#" class="w-1/4 bg-gray-400 overflow-hidden">
<img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="w-1/4 bg-gray-400 overflow-hidden">
<img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
</div>
这里有几个问题。
"overflow: hidden" 不适用于内联元素，但 "a" 标签是内联的。
您在此行内元素上使用了宽度和高度（您不应该）。
你不需要使用 relative with overflow 除非 child 将被绝对定位。
而不是 style="height: 50%" 最好也使用 tailwind (h-1/2).
但是你不需要在元素上设置 50% 的高度，只需要在父元素上设置 flex 和 flex-col。
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex" style="height: 50vh">
<a href="#" class="flex-1 block bg-gray-400 overflow-hidden">
<img class="object-cover origin-center h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1519638399535-1b036603ac77?ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" alt="">
</a>
<a href="#" class="flex-1 block bg-gray-400 overflow-hidden">
<img class="object-cover h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<div class="flex-1 flex flex-col bg-gray-400 overflow-hidden">
<a href="#" class="block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
<div class="flex-1 flex flex-col bg-gray-400 relative overflow-hidden">
<a href="#" class="block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
</div>
此外，此模板看起来像是网格 css 实用程序的完美示例。所以你也可以像这样使用网格而不是 flexboxes:
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-4 grid-rows-2" style="height: 50vh">
<a href="#" class="col-span-1 row-span-2 block bg-gray-400 overflow-hidden">
<img class="object-cover origin-center h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1519638399535-1b036603ac77?ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" alt="">
</a>
<a href="#" class="col-span-1 row-span-2 block bg-gray-400 overflow-hidden">
<img class="object-cover h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="col-span-1 block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="col-span-1 block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="col-span-1 block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="col-span-1 block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
我使用变换创建了一个简单的图像布局。我已经将 overflow-hidden class 添加到父 div 但缩放图像溢出仍然出现在上面的图像前面。如何防止溢出图片出现在上图前面？
<div class="flex" style="height: 50vh">
<a href="#" class="flex-1 bg-gray-400 relative overflow-hidden">
<img class="object-cover origin-center h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1519638399535-1b036603ac77?ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" alt="">
</a>
<a href="#" class="flex-1 bg-gray-400 overflow-hidden">
<img class="object-cover h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<div class="flex-1 bg-gray-400 relative overflow-hidden">
<a href="#" class="w-1/4 bg-gray-400 overflow-hidden relative">
<img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="w-1/4 bg-gray-400 overflow-hidden">
<img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 origin-center transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
<div class="flex-1 bg-gray-400 overflow-hidden">
<a href="#" class="w-1/4 bg-gray-400 overflow-hidden">
<img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="w-1/4 bg-gray-400 overflow-hidden">
<img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
</div>
这里有几个问题。
"overflow: hidden" 不适用于内联元素，但 "a" 标签是内联的。
您在此行内元素上使用了宽度和高度（您不应该）。
你不需要使用 relative with overflow 除非 child 将被绝对定位。
而不是 style="height: 50%" 最好也使用 tailwind (h-1/2).
但是你不需要在元素上设置 50% 的高度，只需要在父元素上设置 flex 和 flex-col。
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex" style="height: 50vh">
<a href="#" class="flex-1 block bg-gray-400 overflow-hidden">
<img class="object-cover origin-center h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1519638399535-1b036603ac77?ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" alt="">
</a>
<a href="#" class="flex-1 block bg-gray-400 overflow-hidden">
<img class="object-cover h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<div class="flex-1 flex flex-col bg-gray-400 overflow-hidden">
<a href="#" class="block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
<div class="flex-1 flex flex-col bg-gray-400 relative overflow-hidden">
<a href="#" class="block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
</div>
此外，此模板看起来像是网格 css 实用程序的完美示例。所以你也可以像这样使用网格而不是 flexboxes:
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-4 grid-rows-2" style="height: 50vh">
<a href="#" class="col-span-1 row-span-2 block bg-gray-400 overflow-hidden">
<img class="object-cover origin-center h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1519638399535-1b036603ac77?ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" alt="">
</a>
<a href="#" class="col-span-1 row-span-2 block bg-gray-400 overflow-hidden">
<img class="object-cover h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="col-span-1 block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="col-span-1 block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="col-span-1 block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="col-span-1 block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>