css 如何在图像上设置背景透明线性渐变？

vu8f3i0k 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(122)

我需要设置这个CSS：

.opacity-down-gradient {
    background: transparent linear-gradient(180deg, #00000000 30%, #000000c6 100%) 0% 0% no-repeat padding-box;
}

字符串
对于此图像：

<CarouselItem key={index} className='relative basis-[33%]'>
   <div className='custom-card-shadow relative h-[400px] rounded-lg'>
       {productSheet.cover?.contentUrl && (
            <img
                className='h-full w-full rounded-lg object-cover'
                src={productSheet.cover?.contentUrl}
                alt={productSheet.cover?.title ?? ""}
             />
         )}

型
当我在img上应用CSS类时，什么都没有出现。为什么？
这是一个playground
我使用的是Tailwind和CSS。

css

来源：https://stackoverflow.com/questions/77752985/how-to-set-a-background-transparent-linear-gradient-on-an-image

1条答案

按热度按时间

bwntbbo31#

问题是，您在.opacity-down-gradient类中定义的渐变是一个背景属性，直接将其应用于<img>标记将不起作用，因为<img>标记不像<div>标记那样支持背景属性。
为了获得你想要的效果，你需要用一个容器<div> Package 你的<img>标签，并将渐变应用到这个容器。下面是你如何做的：

Package 图像：在标签周围创建一个容器。
1.应用渐变：将.opacity-down-gradient类分配给此容器。
1.确保图像可见性：确保图像通过渐变可见。这可以通过正确定位图像和渐变覆盖来实现。
使用另一个div Package 图像和渐变背景div的示例：

<CarouselItem key={index} className='relative basis-[33%]'>
    <div className='custom-card-shadow relative h-[400px] rounded-lg'>
        {productSheet.cover?.contentUrl && (
            <div className='relative h-full rounded-lg'>
                <img
                    className='h-full w-full rounded-lg object-cover absolute top-0 left-0'
                    src={productSheet.cover?.contentUrl}
                    alt={productSheet.cover?.title ?? ""}
                />
                <div className='opacity-down-gradient absolute top-0 left-0 h-full w-full rounded-lg'></div>
            </div>
        )}
    </div>
</CarouselItem>

字符串
你可能需要调整一些东西，但这应该有助于让你在正确的方向！
回复评论（playground featuring working code）：playground to working effect (changed gradient color to red for visibility

赞(0）回复(0）举报 2024-01-09

我来回答

css 如何在图像上设置背景透明线性渐变？

1条答案

相关问题

热门标签

最新问答