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

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，但没有效果。

- Rodrigo Sasaki

---

可能重复问题：https://dev59.com/f2ox5IYBdhLWcg3ww3KV - showdev

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

- Mathijs Flietstra

---

我喜欢这个解决方案。它不太依赖可能会占用大量内存的转换（在IE上似乎也无法与SVG兼容）。 - kmgdev

这种解决方案的缺点是您无法遍历父元素，否则它将被截断。 - Nadia

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

updated fiddle

- vals

---

不错！在 -moz-transform 后面缺少一个闭合括号。 - showdev

@showdev 谢谢！我在复制粘贴的时候漏掉了那个。你猜对了，我正在使用Chrome浏览器。 - vals

我会接受您的答案，但是您能否再帮我一下？在我的代码中它甚至没有显示出来，我不确定为什么。http://jsfiddle.net/FdT7N/2/ - Rodrigo Sasaki

图片上不能使用伪元素。请改用容器div。http://jsfiddle.net/FdT7N/3/ - vals