Я хочу полностью удалить фон изображения неправильной формы, а не просто сделать его прозрачным. Коробка изображения перекрывается другими вещами и мешает. Должен быть способ удалить лишнее пространство.
Я обрезал свое изображение так близко, как только мог в фотошопе, и сделал оставшийся фон прозрачным. Мое изображение шире вверху, чем внизу (представьте себе вертикальную конфету), так что остается много пустого пространства, которое перекрывается с другими объектами на странице.
Должен быть способ удалить лишнее пространство.
Краткий ответ: вы не можете.
Длинный ответ: вы не можете, но вам и не нужно. Никто другой даже не пытается.
(Квалификатор: я зарабатываю на жизнь веб-разработкой и преподаю ее в университете)
Все на веб-странице представляет собой прямоугольник. Так было всегда, начиная с браузера Mosaic 1.0 в 1993 году. Прозрачность существует для создания иллюзии непрямоугольных форм, и она используется практически везде.
То, что вы делаете со своим леденцом, ставите его на задний план. Либо в качестве свойства background-image, где вы можете легко использовать его с помощью background-position, либо использовать position: absolute в теге <img> и идти оттуда.
Если вы хотите, чтобы ваш текст обтекал неправильный объект, обычным способом является стек пустых объектов <div> и творческое использование float. У меня уйма времени, чтобы сделать это правильно, я научил большинство дизайнеров не делать этого.
clip-path многообещающий, но пока Microsoft не наберет скорость, мы либо примем то, что пользователи MSIE увидят что-то еще, либо сделаем что-то еще.
Как уже указывал Скотт: каждое изображение во всем мире прямоугольное. Вы не можете «удалить» части этого прямоугольника.
Тем не менее, CSS дает вам несколько возможностей сделать еще один шаг вперед.
вариант 1: радиус границы
Вы можете использовать радиус границы css , чтобы удалить часть лишнего пространства внизу. Радиус границы используется для закругленных углов, но вы можете передать значение для каждого угла. Таким образом, вы можете обрезать больше внизу, чем вверху.
вариант 2: клип-путь
CSS3 также имеет полноценное свойство отсечения . Это немного сложно понять, но как только вы это поймете, это может стать очень мощной функцией. Вы можете использовать маскирование SVG для «удаления» частей вашего изображения. На данный момент поддержка браузера в лучшем случае в порядке, поэтому используйте ее с осторожностью, если хотите поддерживать IE и более старые браузеры.
PS: Если вы раньше не знали замечательный веб-сайт CSS-трюков , узнайте и полюбите его сейчас, если вы серьезно относитесь к веб-дизайну.
Зак Сосье
Скотт
Скотт
Аманда
Скотт
Райан