Определенные CSS края с переходом размытия

#html #css #css-transitions #css-filters

#HTML #css #css-переходы #css-фильтры

Вопрос:

Я создаю большую кнопку с размытым фоновым изображением, которое размывается при наведении на него курсора мыши. Я использовал контейнер со скрытым переполнением и сделал поле отрицательным на фоновом изображении, чтобы края были определены.

Однако, когда я навожу курсор на изображение, и оно переходит от размытого к размытому или наоборот, края изображения больше не определены. Это создает эффект, при котором будут видны края белого контейнера под ним. Будучи полностью размытыми или полностью размытыми, эти края немедленно становятся определенными снова.

Как я могу это исправить?

 body {
  background-color: black;
}

.container {
    position: fixed;
    top: 2.5vh;
    left: 2.5vh;
    width: 50vh;
    height: 50vh;
    background-color: white;
    overflow: hidden;
}

.image {
    background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
    margin: -5%;
    width: 110%;
    height: 110%;
    filter: blur(6px);
    transition: 1s;
}

.image:hover {
    filter: blur(0px);
}

 <!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <div class="image"></div>
            placeholder text
        </div>
    </body>
</html>

Развернуть фрагмент

1. привет и добро пожаловать в SO. Пожалуйста, добавьте минимальный воспроизводимый фрагмент кода (ctrl m).

2. @tacoshy мой плохой, я впервые публикую здесь, это в

3. к сожалению, я не могу воспроизвести ошибку с помощью предоставленного кода. Есть ли какой-либо другой код, который конфликтует? вы уже очистили кэш браузера?

4. @tacoshy Я очистил кэш своего браузера, и я вижу проблему, когда запускаю фрагмент кода здесь

5. интересно. можете ли вы предоставить скриншот этого? как я уже сказал, у меня действительно нет белого фона, если я наведу курсор. Какой браузер вы используете?

Ответ №1:

Я думаю, что это ошибка браузера.

на границах можно увидеть фон контейнера.

Его можно сделать менее заметным, если фон контейнера такой же, как у изображения. Я использовал inherit в изображении, чтобы не устанавливать его в 2 местах.

 body {
  background-color: black;
}

.container {
    position: fixed;
    top: 2.5vh;
    left: 2.5vh;
    width: 50vh;
    height: 50vh;
    background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
    overflow: hidden;
}

.image {
    background-image: inherit;
    margin: -5%;
    width: 110%;
    height: 110%;
    filter: blur(6px);
    transition: 1s;
}

.image:hover {
    filter: blur(0px);
}

 <!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <div class="image"></div>
            placeholder text
        </div>
    </body>
</html>

Развернуть фрагмент

Ответ №2:

Проблема, по-видимому, вызвана отрицательным полем и настройками ширины и высоты 110% в .image классе css. Я предполагаю, что вы делаете это, чтобы попытаться сохранить четкие края при размытии. Я изменил их, и приведенный ниже фрагмент показывает результат. Надеюсь, это будет полезно:

 body {
  background-color: black;
}

.container {
    position: fixed;
    top: 2.5vh;
    left: 2.5vh;
    width: 50vh;
    height: 50vh;
    overflow: hidden;
}

.image {
    background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
    margin: 0;
    width: 100%;
    height: 100%;
    filter: blur(6px);
    transition: 1s;
}

.image:hover {
    filter: blur(0px);
}

 <!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <div class="image"></div>
            placeholder text
        </div>
    </body>
</html>

Развернуть фрагмент

1. Это делает его последовательным, но все же не тот эффект, который я хочу. Я буду экспериментировать, помещая фоновое изображение позади него, чтобы края не были заметны.