CSS background gradient is not completely above the background image-CodePudding

I need a gradient over a background image. Unfortunately, the gradient is not completely over the image, which then leads to a kind of line through the edge of the image, which sticks out on the side. Does anyone know a solution for this?

Here you can try:

However, when I resize my browser windows, every now and then the dash disappears.

CodePudding user response：

Looks like a possible bug with the way background-size cover is rendered for fractional pixel width elements.

As an alternative, you could use a pseudo ::before element instead of background-image with linear-gradient.

i.e.

.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;
}

Example here.

CodePudding user response：

This is the best soloution:

<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>