#javascript #html #css
#javascript #HTML #css
Вопрос:
Это вопрос, который возникает довольно часто, когда я создаю сайты. Я никогда не придумывал решения, но я подумал, что, возможно, какой-нибудь умный участник SO сможет это решить, так что вот:
Допустим, у меня есть большое фоновое изображение на всю страницу background-size:cover . Я хочу, чтобы определенная часть изображения находилась в состоянии наведения, например, скажем, это большое изображение автомобиля, едущего по горе. Если вы наведете курсор на автомобиль, я хочу, чтобы он был заменен светящимся автомобилем.
Один из способов, которым я мог бы это сделать, — использовать javascript для замены всего фонового изображения на то же изображение горной сцены, но со светящимся автомобилем. Но, очевидно, для этого требуется дополнительная загрузка большого изображения. (Как в этом примере).
Для меня было бы лучше иметь другой div, который закрывает автомобиль, и просто назначить новый фон внутреннему div, который идеально соответствует родительскому изображению.
Это просто сделать невосприимчивым способом (см. Этот Пример), но я не могу придумать способ сделать это с адаптивным background-size:cover изображением.
Похоже, что может быть решение, возможно, с использованием подгонки объекта или чего-то в этом роде. Но ничего не приходит на ум. Вот адаптивная версия пера (которая не работает, но демонстрирует мою желаемую настройку).
Может кто-нибудь придумать способ достижения этого? Какие другие методы могут здесь работать?
Спасибо
Комментарии:
1. можете ли вы объяснить, чего вы хотите достичь, вы делитесь только своей проблемой и мыслями
2. @Aman В самой простой форме: у меня есть кнопка внутри отзывчивого родительского div. Родительский div имеет фоновое изображение с «background-size: cover», а кнопка имеет фоновое изображение, которое является частью фонового изображения родительского div. Я хочу, чтобы кнопка идеально совпадала с родительской, чтобы наложение изображения не выглядело. И я хочу, чтобы это было отзывчивым.
3. Как насчет использования изображения, такого как png или gif, которое имеет ту же ширину и высоту, но прозрачный фон?
4. @JSKIM Спасибо. Я думаю, что именно так мне придется это сделать. Я хотел избежать этого, потому что это означает загрузку двух больших изображений, но на самом деле, протестировав его, png, который в основном прозрачный, не создает очень большого размера файла.