Intereting Posts

Как мы можем достичь этого стиля изображения css?

В wordpress у нас есть возможность назначить «Image CSS class» любому изображению. Мое требование – как мы можем написать класс CSS, который изменит изображение, показанное ниже

Оригинальное изображение

введите описание изображения здесь

Изображение после CSS-класса (обратите внимание на нижний угол)

введите описание изображения здесь

Поскольку я публикую головоломки на своем веб-сайте, это важно.

Solutions Collecting From Web of "Как мы можем достичь этого стиля изображения css?"

Подход CSS:

Для чисто треугольного угла в css см. Этот комментарий к блогу. Код Простой эффект сложенного угла. С помощью CSS или этого примера с откинутым углом на Codepen. Затем вы можете добавить повернутый текст «Ответ» как абсолютно позиционированный div с преобразованием css: rotate .

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


Привязка класса к изображению (или содержащему элемент / сообщение)

Медиа-менеджер WordPress автоматически назначает классы изображениям, загруженным и вставленным в сообщение. Существует несколько подходов к назначению «класса» для таргетинга изображения (ов).

  1. Если ваш угловой эффект применяется ко всем изображениям определенного типа сообщения,

    • вы можете просто нацеливать изображения с помощью css, например: .post-type-class img
    • В качестве альтернативы вы можете добавить к теме ссылку .
  2. Создайте собственный размер изображения (которому автоматически присваивается класс с похожим именем). Этот подход добавит размер изображения в качестве опции на экране управления мультимедиа, когда пользователь решит вставить изображение в сообщение. См. Это хорошо написанное / документальное сообщение в блоге: добавление и использование пользовательских изображений WordPress