Intereting Posts
Использование AJAX в FrontEnd с плагином для плагинов WordPress (wppb.io) запросить новую созданную таблицу с помощью $ wpdb Примените тег к каждому изображению «Link Rel» Автозаполнение jQuery в WordPress Отображать пользовательский список тегов в редакторе post / page с помощью перехватчиков Собирайте сообщения в корзину / лайтбокс и делитесь с другим пользователем Комментарий комментария WordPress «перепутался, из-за плагина – DISQUS Получить исходную строку названия элемента меню вместо метки Каков правильный способ поддержки темы для пользовательских интерфейсов плагина? Создать тему автоматически выбрать меню по умолчанию Галерея Gallery NextGen для разных галерей Не показывать старый перенесенный контент на веб-сайте Оптимизация количества вызовов на настраиваемые поля Фильтр изображений работает на страницах прикрепления, но не в сообщениях. Я не могу получить идентификатор изображения Каталог плагинов говорит, что мой плагин не доступен на испанском, но это

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