Question

这是我最近的问题的补充： Is it possible to use pseudo-elements to make containing elements wrap around an absolutely-positioned element (like a clearfix)?

JSFiddle：http://jsfiddle.net/derekmx271/T7A7M/

我正在尝试使用伪元素来“清除”绝对定位的图像。我已经得到了相同的图像显示在幻灯片后面，但似乎无法将宽度应用于插入的图像。我是疯了，还是你不能将宽度应用于内容为content的伪元素：url（img / image.jpg）？我尝试了不同的显示变化：块等无济于事......

#slider ul:after {
  content: url(http://www.cs7tutorials.com/img/slide1.jpg);
  display: block;
  position:relative;
  width:70px;
}

我需要将伪元素图像的宽度设置为100％，将最大宽度设置为800px，以便它与我的幻灯片具有相同的尺寸。

Answer 1

你并不疯狂：确实无法改变使用content插入的图像的尺寸。图像始终按原样呈现。这被称为替换内容，或replaced element（除非我们在这里没有讨论元素）。

但是，由于section 10 of the CSS2.1 spec中所述，使用width和height可以重置元素，因此这就提出了为什么属性不会似乎适用于此。看起来，答案是，属性确实适用，但是对于伪元素框而言 - 您可以通过为伪元素提供背景颜色来看到这一点。而不是替换伪元素框本身，图像被渲染为伪元素框的子，因此根本不能被设置样式（因为它需要另一个伪元素，它不会'存在）。

这有助于另一个问题：它为什么不完全取代伪元素盒？不幸的是，CSS2.1根本没有指定这种行为，所以the implementation that was agreed on is to render the content as a child of the pseudo-element box instead：

CSS2.1并没有真正清楚地定义:: before和:: after上的'content'的处理模型，而是CSS 2.1中的信息性示例，'content'指定列表的事实
-Boris

希望这将在CSS生成内容级别3中进一步解决，重写工作刚刚开始。

与此同时，如果您希望能够调整:after伪元素和生成的图像的大小，则需要将其应用为背景图像而且 - 假设浏览器支持不是问题 - 使用background-size以及width和height来缩放它（基于这些属性应用于伪元素框的理解）。

Answer 2

使用background-image：http://jsfiddle.net/T7A7M/12/

查看演示

Answer 3

您可以通过使用 sayHello(name: usersName) 并将 display: flex 设置为要设置的尺寸的相反轴来设置宽度或高度，但不能同时设置两者。

例如：

flex-direction

Demonstration here.

你可以将宽度应用于：before /：after伪元素（content：url（image））？

3 个答案: