如何在伪元素中调整图像大小？

Question

我正试图用伪元素做一些技巧.

我正在展示一个排名,我希望冠军能够在胜利者的顶部展示,在图像所在的角落倾斜45度.但是图像太大了,有没有办法让我重新调整伪元素上添加的图像？

我只有这个div:

<div class='box'></div>

有了这个CSS:

.box {
    width: 50px;
    height: 50px;
    float: left;
    border: 1px solid #000;
    position:absolute;
    top: 100px;
    left: 100px;
}

.box::after{
    content: url(URL_OF_IMAGE);
    position: absolute;
    top: -10px;    
    right: -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

我在JSFiddle上做了一个例子:http://jsfiddle.net/GEtds/

我试图改变height和width,但没有效果.

Answer 1

你可以通过设置图像来实现background-image,结合使用background-size: cover;它可以通过设置width和height使用伪元素来控制图像的大小.您还需要添加content: "";以确保呈现伪元素.

这是一个 jsFiddle

CSS

.box::after {
    display: block;
    content: "";
    background-image: url(http://www.clker.com/cliparts/9/5/e/b/12428065451316964828Simple_crown_icon.svg.med.png);
    background-size: cover;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

Answer 2

由于您已经在使用转换,请更进一步.使用它们移动和重新缩放图像:

.box::after{
    content: url(http://www.clker.com/cliparts/9/5/e/b/12428065451316964828Simple_crown_icon.svg.med.png);
    position: absolute;
    top: -10px;
    right: -10px;
    width: 0.1em;
    height: 0.1em;
    -webkit-transform: translateY(-35px) rotate(45deg) scale(0.2);
    -moz-transform: translateY(-35px) rotate(45deg) scale(0.2);
}

更新小提琴