当前位置: 首页 > 面试题库 >

我可以在CSS:before /:after伪元素中更改图像的高度吗?

温智明
2023-03-14
问题内容

假设我想使用图像修饰指向某些文件类型的链接。我可以声明我的链接为

<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:"";
}


 类似资料:
  • 问题内容: 这是我最近的问题的补充:是否可以使用伪元素来使包含元素包裹在绝对定位的元素周围(如clearfix)? 我正在尝试使用伪元素来“清除”绝对定位的图像。我已经尽力使相同的图像显示在幻灯片后面,但似乎无法对插入的图像应用宽度。我疯了吗,还是不能将宽度应用于内容为url(img/image.jpg)的伪元素?我尝试了display:block等的各种变化,但无济于事… 我需要将伪元素图像的宽

  • 问题内容: 我正在尝试在字段上使用CSS伪元素,但是它不起作用。如果我将它与一起使用,则可以正常运行。 这有效(在“ buu!”之后和“更多”之前放置笑脸) 这是行不通的-它只将someValue涂成红色,但没有笑脸。 我究竟做错了什么?我应该使用另一个伪选择器吗? 注意:我无法在周围添加,因为它是由第三方控件生成的。 问题答案: 并且在Internet Explorer 7及更高版本中的任何元素

  • 问题内容: 是否可以使用或在angular2中更改伪元素的样式? 为了使div上的模糊效果像叠加层一样,我应该在伪元素上设置背景图像。 我尝试了类似的东西 它没有用。我也试过了 问题答案: 不,这不可能。实际上,这不是一个Angular问题:伪元素不是DOM树的一部分,因此不会暴露任何可用于与其交互的DOM API。 如果要以编程方式处理伪元素,通常的方法是间接的:添加/删除/更改类,并在CSS中

  • 我有一些. jpg,我正在面板中显示。不幸的是,它们都是大约1500x1125像素,这对我来说太大了。有没有一种编程方法来改变这些. jpg的分辨率?

  • 问题内容: 我想选择伪元素 这是我的CSS: 码 问题答案: 直接绑定到伪元素是不可能的,因为它们不是DOM的一部分,但是可以通过绑定到父元素并测试与作用于该元素的元素相关的偏移来近似达到预期的效果: 以下显示为,其中单击“ ELEMENT”和“ ++”分别会触发不同的行为:

  • 问题内容: 有什么原因导致此CSS无法正常工作? ..在这个HTML上? 这个想法是在匹配的锚标签上有一个伪元素。但是我不希望它适用于包装图像的锚标签。而且由于我无法使用诸如来定位锚,所以我想也许可以通过找到一个与之类似的图像来定位:after伪元素。 任何见识将不胜感激。 问题答案: 您无法定位:之后,因为它的内容未在DOM中呈现且无法对其进行操作-为此,必须重新呈现DOM,而CSS不能像这样进