如何才能实现这种图像的css风格呢?

时间:2017-12-17 作者:Avinash Patel

在wordpress中,我们可以选择将“图像CSS类”分配给任何图像。我的要求是如何编写一个CSS类来更改下面显示的图像

原始图像

enter image description here

CSS类后的图像(请注意下角)

enter image description here

当我在我的website 所以这很重要。

1 个回复
SO网友:Anson W Han

CSS Approach:

对于css中的纯三角形角,请参见blog post Code a Simple Folded Corner Effect With CSS 或者这个Folded Corner example on Codepen 然后,您可以使用css transform: rotate property.

但是,如果您必须使用卷曲角效果,那么最好的方法是在透明画布上用绝对定位的div与卷曲角的css背景图像覆盖原始图像。

<小时>

Attributing the class to the image (or it\'s containing element/post)

Wordpress的媒体管理器会自动为上传并插入帖子的图像分配类别。有多种方法可以指定“类”来定位图像。

如果角点效果应用于特定帖子类型上的所有图像,

您可以简单地使用css定位图像,例如:.post-type-class imgadd a hook to the theme.

  • 创建自定义图像大小(将自动为其分配具有类似名称的类)。当用户选择将图像插入帖子时,此方法将在媒体管理屏幕中添加图像大小作为选项。请参阅这篇写得很好/有文档记录的博客文章:Adding and Using WordPress Custom Image Sizes

  • 结束

    相关推荐

    定制器:实时预览中同一元素上的多个CSS样式

    我有一个粘性标题,它有一个初始背景色和一个不同的滚动背景色。我的javascript添加了.navbar-scroll 滚动时,将类设置为以下导航栏:<nav id=\"nav\" class=\"navbar navbar-fixed-top\"> ... </nav> css如下所示:.navbar { background-color: #000; } .navbar-scroll {