Почему прозрачный фон занимает место в html?

Есть иконка - png. В редакторе она выглядет так
6448b7636fe147e8ba86c8513a93a487.png

Всё бы ничего, но для таких иконок у меня должен быть градиент на hover. И получается такая некрасивая вещь:
c7dd595aae64430497bb528112653c61.png

код такой. haml
.row
  .col-sm-2
    %i.custom-icon.icon-room

scss:
.custom-icon{
  display: block;
  width: 100%;
  height: 150px;
}
.icon-room {
  background: image-url('store/icons/room.png') no-repeat center;
}
.icon-room:hover{
  background: linear-gradient(rgba(230, 230, 255, 0.7), rgba(230, 230, 255, 0.7)), image-url('store/icons/room.png') no-repeat center;
  border-radius: 10%;
}


Как сделать, чтоб градиент не вылазил за квадрат? Я сохраняла для web.
Всем спасибо
  • Вопрос задан
  • 334 просмотра
Решения вопроса 3
ThunderCat
@ThunderCat Куратор тега CSS
{PHP, MySql, HTML, JS, CSS} developer
а что не так? На белый фон наложен градиент, это вы имеете в виду? Так вы на белый накладываете цвет, конечно он будет другой.

тут в примере 4 смотрите подпись:
Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы.
Ответ написан
aliksend
@aliksend
Software Engineer
Не знаю SCSS и JsBin не захотел работать с вашим кодом, поэтому написать на CSS
.custom-icon{
  display: block;
  width: 150px;
  height: 150px;
}
.icon-room {
  background-image: url('http://pngimg.com/uploads/scratches/scratches_PNG6175.png') no-repeat center;
}
.icon-room:hover{
  background-color: lightgray;
  border-radius: 10%;
}

Ссылка на пример
PS Картинка по URL не вместилась в 150х150, но при наведении видно что background меняется
Ответ написан
UDAV99
@UDAV99
web программист, верстальщик
Нужно обрезать файл до начала изображения. Прозрачный фон ДОЛЖЕН занимать место.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы