Intereting Posts
Почему при перемещении многоузловой сети WordPress меняются настройки моей темы? Сортировка записей по дате – get_blogs_of_user_id () создание глоссария с wordpress Изменить порядок отправки по мета-ключу, на каждую почтовую основу WordPress Customize – Переместить опции / меню «меню» в другой раздел Как создать таблицу базы данных, добавить данные, обновить и удалить с помощью wpdb через плагины? Список пользователей с наибольшим количеством сообщений Регистрировать таксономию `product_cat` для типа post post post Можно ли создавать темы внуков? Как добавить одну функцию для всех логов WordPress Поддержка пользовательских сообщений типа get_users ('orderby = post_count'); Как перевести сообщение «неправильный пароль» Найдите фильтр pre_get_posts, который может обрабатывать несколько типов сообщений и категорий? Перемещено из WP.Domain в основной домен, не удается войти BuddyPress: добавление новой вкладки в группы

Как мы можем достичь этого стиля изображения 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