4

我正在尝试用伪元素做一些技巧。

我正在显示一个排名，我希望在获胜者的顶部显示一个皇冠，在图像所在的框角倾斜 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但没有效果。

4

2 回答 2

6

您可以通过将图像设置为 来做到这一点background-image，结合background-size: cover;这将允许您通过在伪元素上设置widthand来控制图像的大小。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);
}
于 2013-10-08T17:35:05.673 回答
5

由于您已经在使用转换，请更进一步。使用它们来移动和重新缩放图像：

.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);
}

更新的小提琴

于 2013-10-08T18:19:09.520 回答