Содержит фон определенной формы (например, ромб) - PullRequest
0 голосов
/ 18 марта 2012

Я пытаюсь ограничить фон определенной формой.

Пример: у меня есть тег div или img, который имеет квадратную форму.Затем я хочу, чтобы часть (углы) была прозрачной, а часть (ромб в центре) - определенного цвета (с фоновым цветом) или определенного изображения (с фоновым изображением).

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

Я хочу избавиться от белой части, которая видна по краям (например, иметь прозрачный png с белым ромбом в центре), но тогда фон будет просвечивать только по краям.Поэтому я хочу, чтобы фон на изображении показывал, где оно не прозрачно, а не где прозрачно.Я почти уверен, что это связано с изображениями, но если у вас есть другой вариант, дайте мне знать.

Вот пример http://jsfiddle.net/r7jxm/. Вы можете видеть, что все изображения имеют белые края, где онидолжен быть прозрачным, поэтому изображения ниже не просвечивают.Мне все еще нужно иметь возможность изменить цвета фона в конце с помощью CSS.

1 Ответ

1 голос
/ 18 марта 2012

У него не самая лучшая поддержка, но CSS-маски существуют.

Они звучат так, как будто бы достигли того, что вы хотите.

...