假设我想使用图像装饰指向某些文件类型的链接。我可以将我的链接声明为
<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做的东西更兼容。我原来的问题的答案似乎是“你有时可以这样做”。
允许调整background-size
。但是,您仍然需要指定块的宽度和高度。
.pdflink:after {
background-image: url('/images/pdf.png');
background-size: 10px 20px;
display: inline-block;
width: 10px;
height: 20px;
content:"";
}
我用这个字体大小控制宽度
.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');
background-size: 100%;
content: ".......................................";
font-size: 30pt;
}
现在使用flexbox可以大大简化代码,只需根据需要调整1个参数:
.pdflink:after {
content: url('/images/pdf.png');
display: inline-flex;
width: 10px;
}
现在您可以调整元素的宽度,高度将自动调整,增加/减少宽度,直到元素的高度达到您需要的数量。
content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;
请注意,:after
伪元素是一个框,它反过来包含生成的图像。无法为图像设置样式,但您可以设置框的样式。
以下只是一个想法,而solution above更实用。
.pdflink:after {
content: url('/images/pdf.png');
transform: scale(.5);
}
缺点:你需要知道图像的内在尺寸,它会留下一些空白,我无法摆脱ATM。
由于我的其他答案显然不是很清楚,这是第二次尝试:
有两种方法可以回答这个问题。
忘记:after
伪选择器,并寻找类似的东西
.pdflink {
min-height: 20px;
padding-right: 10px;
background-position: right bottom;
background-size: 10px 20px;
background-repeat: no-repeat;
}
问题是:你可以设置生成内容的样式吗?答案是:不,你不能。在这个问题上有一个lengthy discussion on the W3C mailing list,但到目前为止还没有解决方案。
生成的内容将呈现为生成的框,您可以设置该框的样式,但not the content as such。不同浏览器显示非常不同的行为
#foo {content: url("bar.jpg"); width: 42px; height:42px;} #foo::before {content: url("bar.jpg"); width: 42px; height:42px;}
Chrome会调整第一个的大小,但会使用图像的内在尺寸
firefox和ie不支持第一个,并使用第二个内在维度
opera使用两种情况的内在维度
(来自http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html)
类似地,浏览器在诸如http://jsfiddle.net/Nwupm/1/之类的东西上显示出非常不同的结果,其中生成了多个元素。请记住,CSS3仍处于早期开发阶段,这个问题还有待解决。
您应该使用背景而不是图像。
.pdflink:after {
content: "";
background-image:url(your-image-url.png);
background-size: 100% 100%;
display: inline-block;
/*size of your image*/
height: 25px;
width:25px;
/*if you want to change the position you can use margins or:*/
position:relative;
top:5px;
}
这是另一个(工作)解决方案:只需将图像调整为您想要的大小:)
.pdflink:after {
display: block;
width: 20px;
height: 10px;
content:url('/images/pdf.png');
}
你需要pdf.png为20px * 10px才能工作。 css中的20px / 10px用于给出块的大小,以便块后面的元素不会与图像混淆
不要忘记保留原始图像的原始大小的副本
diplay: block;
没有任何影响
positionin对于前端基础也相当奇怪,所以要小心
body:before{
content:url(https://i.imgur.com/LJvMTyw.png);
transform: scale(.3);
position: fixed;
left: 50%;
top: -6%;
background: white;
}
.pdflink:after {
background-image: url('/images/pdf.png');
background-size: 10px 20px;
width: 10px;
height: 20px;
padding-left: 10px;// equal to width of image.
margin-left:5px;// to add some space for better look
content:"";
}
您可以使用zoom
属性。检查this jsfiddle
您可以像这样更改Before or After元素的高度或宽度:
.element:after {
display: block;
content: url('your-image.png');
height: 50px; //add any value you need for height or width
width: 50px;
}