假设我想用图像装饰指向某些文件类型的链接。我可以声明我的链接为
<a href='foo.pdf' class='pdflink'>A File!</a>
然后有CSS
.pdflink:after { content: url('/images/pdf.png') }
现在，这工作得很好，除非pdf.png的大小不适合我的链接文本。
我希望能够告诉浏览器缩放:after图像，但我无法找到正确的语法。或者这就像背景图像一样，无法调整大小?
ETA:我倾向于a)将源图像大小调整为“正确的”大小，服务器端和/或b)更改标记，简单地内联提供IMG标记。我试图避免这两件事，但他们听起来会更兼容，而不是试图做纯粹的CSS的东西。我最初的问题的答案似乎是“你有时可以做到”。
当前回答
你可以像这样改变Before或After元素的高度或宽度:
.element:after {
display: block;
content: url('your-image.png');
height: 50px; //add any value you need for height or width
width: 50px;
}
其他回答
你可以像这样改变Before或After元素的高度或宽度:
.element:after {
display: block;
content: url('your-image.png');
height: 50px; //add any value you need for height or width
width: 50px;
}
还:块;没有任何影响
根据前端的基本原理，Positionin也会非常奇怪，所以要小心
body:before{
content:url(https://i.imgur.com/LJvMTyw.png);
transform: scale(.3);
position: fixed;
left: 50%;
top: -6%;
background: white;
}
我用这个字体大小控制宽度
.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');
background-size: 100%;
content: ".......................................";
font-size: 30pt;
}
你可以使用缩放属性。检查这个jsfiddle
这里是另一个(工作)解决方案:只是调整你的图像到你想要的大小:)
.pdflink:after {
display: block;
width: 20px;
height: 10px;
content:url('/images/pdf.png');
}
你需要pdf.png为20px * 10px，这样才能工作。 css中的20px/10px在这里给出块的大小，以便块之后的元素不会与图像混淆
不要忘记保留原始图像的原始大小的副本
