Intereting Posts
регистрация spambot без предоставления электронной почты или пароля, минуя процесс регистрации У WordPress есть способ изменить «Естественный» размер загруженных изображений? Добавление настраиваемого поля в приложения в определенной категории paged param всегда 0 Как создать пользовательскую панель мониторинга для моего сайта прачечной? Что не так в этом коде? Как добавить изображения в сообщение, не вставляя их в область содержимого редактора сообщений? Каков наилучший способ изменения боковых панелей на основе пользовательских правил таксономии? Удаление значка WordPress из нижнего колонтитула ссылки Удаленный сценарий jQuery из header.php, любые проблемы? Лучшая практика для включения вывода плагинов в шаблон без использования короткого кода? Как мне перестроить библиотеку WordPress Media после перехода на новый хост? Использование cron для нескольких запросов the_post_thumbnail масштабирование не жесткого обрезки Как удалить ссылки из функции «Получить список терминов»?

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