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

Question

[Карина]

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


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


код такой. 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.
Всем спасибо

Comments

[Оптимус Пьян]

Код html, css прикладывайте всегда когда такие вопросы задаёте

[Карина]

Оптимус Пьян: ок, ща

Answer 1

[ThunderCat]

а что не так? На белый фон наложен градиент, это вы имеете в виду? Так вы на белый накладываете цвет, конечно он будет другой.

тут в примере 4 смотрите подпись:

Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы.

Comments

[Карина]

нет, я имею ввиду, что градиент вылазит за квадрат - я это вылечить хочу

[ThunderCat]

iKapex: видимо блок больше бэкграунда, иначе все ложилось бы в пределах картинки. В инспекторе должно быть видно какого размера блок и фон. Либо подгонять картинку, либо блок, либо просто менять картинку на фоне на другую нужного цвета и не париться.

[Карина]

ThunderCat: видимо из-за того, что есть область и за квадратом этим - вот поэтому градиент так работает. Ладно, спасибо, буду просить картинку уже с градиентом.

Answer 2

[Alik Send]

Не знаю 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 меняется

Comments

[Alik Send]

Хотя в вашем случае есть отступы от краёв и, придётся либо делать дополнительный элемент и его "затемнять" либо, как подсказывает ThunderCat, сделать двумя картинками

[Карина]

видимо, здесь нужна картинка уже с градиентом и на hover ее заменять

[Alik Send]

iKapex: да, это будет лучшее решение

Answer 3

[Сергей]

Нужно обрезать файл до начала изображения. Прозрачный фон ДОЛЖЕН занимать место.