CSS背景梯度并不完全高于背景图像。

Question

我需要背景图像上的渐变。不幸的是，梯度并不是完全覆盖在图像上，这导致了一条线穿过图像的边缘，突出在图像的侧面。有人知道解决这个问题的办法吗？

在这里您可以尝试：顺风游戏

部分图像

    <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="mt-24">
  <div class="">
    <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="max-w-7xl mx-auto">

      <div class="relative max-w-4xl px-8 z-30 flex flex-row flex-wrap right-0 items-center" style="height:40rem;">
        <div class="max-w-7xl">
        <p class="font-bold text-blue-600 text-xl">{{ bigImageRight.untertitel }}</p>
        <h4 class="text-4xl text-gray-800 font-light pb-8">{{ bigImageRight.titel }}</h4>
        <div class="text-lg text-gray-800">
          {{ bigImageRight.text }}
        </div>

        <div class="mt-8">

        {% if bigImageRight.buttonText %}
        <a href="{{ bigImageRight.buttonVerlinkung }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
          {{ bigImageRight.buttonText }}
          <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
          </svg>
        </a>
      {% endif %}
          </div>
        </div>

      </div>
    </div>
  </div>

​

​

然而，当我调整浏览器窗口的大小时，破折号不时会消失。

Answer 1

对于小数像素宽度元素，background-size cover的呈现方式似乎是一个可能的错误。

作为另一种选择，您可以使用伪::before元素，而不是background-image和linear-gradient。

即

.hero::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, .01) 1%, rgb(255, 255, 255));
    pointer-events: none;
}

例如这里。

Answer 2

这是最好的解决方案：

<div
      class="w-3/5 absolute right-0"
      style="background-image:
    linear-gradient(to right, rgba(255, 255, 255, 1) 10vw, rgba(0, 0, 0, 0.3)),
    url('https://images.unsplash.com/photo-1632310453712-1d09e6b50f05?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80');
    width: 80%;
    height: 40rem;
    background-size: cover;"></div>