我需要背景图像上的渐变。不幸的是，渐变不完全超过图像，然后导致一种线通过图像的边缘，突出在侧面。有人知道解决这个问题的方法吗？

您可以在这里尝试:tailwind-play

图像的一部分

    <div class="w-3/5 absolute right-0" style="height: 40rem; background: linear-gradient(270deg,rgba(0, 0, 0, .01) 1%, rgb(255, 255, 255, 1) ), url({{ bigImageRight.bild.one().getUrl() }}); background-size: cover; background-position: center;"></div>

完整代码（顺风CSS)

    <div class="w-3/5 absolute right-0" style="height: 40rem; background: linear-gradient(270deg,rgba(0, 0, 0, .01) 1%, rgb(255, 255, 255, 1) ), url({{ bigImageRight.bild.one().getUrl() }}); background-size: cover; background-position: center;"></div>

但是，当我调整浏览器窗口大小时，破折号不时消失。

顺晟科技：

对于分数像素宽度元素的呈现方式可能存在bug。

作为另一种选择，您可以使用伪元素来代替。

即

    <div class="w-3/5 absolute right-0" style="height: 40rem; background: linear-gradient(270deg,rgba(0, 0, 0, .01) 1%, rgb(255, 255, 255, 1) ), url({{ bigImageRight.bild.one().getUrl() }}); background-size: cover; background-position: center;"></div>

示例此处.

这是最佳解决方案:

    <div class="w-3/5 absolute right-0" style="height: 40rem; background: linear-gradient(270deg,rgba(0, 0, 0, .01) 1%, rgb(255, 255, 255, 1) ), url({{ bigImageRight.bild.one().getUrl() }}); background-size: cover; background-position: center;"></div>