Задать вопрос

Почему прозрачный фон занимает место в 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.
Всем спасибо
  • Вопрос задан
  • 351 просмотр
Подписаться 2 Оценить 2 комментария
Решения вопроса 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 программист, верстальщик
Нужно обрезать файл до начала изображения. Прозрачный фон ДОЛЖЕН занимать место.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы