css -::before 或::after 插入的图片高度是否可控?

标签 css pseudo-element css-content

<分区>

我使用::before 或::after 插入图片。 CSS中的代码是这样的:

p::before {
    content: url(../image/xs.jpg);
}

p::after {
    content: url(../image/submit.png);
}

当我检查::before 或::after 的宽度时,内容框的宽度与图片的宽度相同。但是,内容框的高度是自动设置的,低于图片的高度。我试着像这样指定高度:

p::before {
    height: 37px;
}

p::before {
    height: 71px;
}

它不起作用。也不会溢出。在这种情况下有什么办法可以指定高度吗?

最佳答案

来自 the specification你可以阅读:

Makes the element or pseudo-element a replaced element, filled with the specified <image>. Its normal contents are suppressed and do not generate boxes, as if they were display: none.

因此图像将位于伪元素内,应用宽度/高度将简单地控制伪元素而不是图像。

举个例子来说明:

p::before {
  content: url(https://picsum.photos/50/50);
  
  /**/
  border:5px solid red;
  display:inline-block;
  width:150px;
  height:100px;
  background-color:blue;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper scelerisque arcu, non cursus nibh eleifend vitae. Fusce eget justo lorem. Duis eget felis sit amet dolor interdum placerat sagittis auctor tellus. Nunc sodales ut odio at placerat. Integer non interdum dui, id sagittis ante. </p>

注意文本是如何根据相对于图像的基线对齐方式对齐的。这与执行以下操作完全相同:

p span{

  border:5px solid red;
  display:inline-block;
  width:150px;
  height:100px;
  background-color:blue;
}
<p><span><img src="https://picsum.photos/50/50" ></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper scelerisque arcu, non cursus nibh eleifend vitae. Fusce eget justo lorem. Duis eget felis sit amet dolor interdum placerat sagittis auctor tellus. Nunc sodales ut odio at placerat. Integer non interdum dui, id sagittis ante. </p>

所以技术上我们无法控制图像的高度/宽度,因为我们无法选择它(也许将来我们会)


唯一的解决方案是将其视为背景,因此它是伪元素的一部分:

p::before {
  content:"";
  background: url(https://picsum.photos/50/50) center/cover;
  
  /**/
  border:5px solid red;
  display:inline-block;
  width:150px;
  height:100px;
  background-color:blue;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper scelerisque arcu, non cursus nibh eleifend vitae. Fusce eget justo lorem. Duis eget felis sit amet dolor interdum placerat sagittis auctor tellus. Nunc sodales ut odio at placerat. Integer non interdum dui, id sagittis ante. </p>

关于css -::before 或::after 插入的图片高度是否可控?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59029863/

相关文章:

html - 我可以使用 :before or :after pseudo-element on an input field? 吗

css - 如何在 CSS 中执行算术运算?

javascript - 是否有一个好的图表 API 可以在滚动/缩放时使用 Ajax 延迟加载大型数据集?

css - CKEditor 4 结合CSS

css - 是否有可能在伪元素之前/之后设置 iframe 的样式?

css - 为什么在::after 伪元素上需要一个空的 `content` 属性?

CSS:混淆元素的宽度百分比

css - 添加一个ID到:before Pseudo Class

链接中的 CSS 首字母选择器

css - 过渡 CSS 伪元素