CSS伪元素大小问题

请告诉我为什么:before伪元素不表现得像在这种情况下，一个普通img：CSS伪元素大小问题

enter image description here

左边的一个是div与img内img的宽度和高度等于100％。正确的一个是div与:before和:before的宽度和高度也是100％，但效果是不同的！

（我知道我可以使用一个background-image解决办法，但什么是错的:pseudo当其content属性为url()？）

小提琴：http://jsfiddle.net/Tp9JG/4/

来源

2013-08-28 Cherniv

我对此感到困惑，但它看起来像'宽度'和'高度'根本不适用于通过'url（）'插入的图像，请参阅http://stackoverflow.com/questions/14978807 – xec

@xec谢谢到Tomzan，发现这个：http://lists.w3.org/Archives/Public/www-style/2011Nov/thread.html#msg451 – Cherniv

另外请注意，如果您选择了“display：inline”，则无法控制'width' ;'。 – connexo

不幸的是你无法控制图像的大小，指定当它通过内容，但是你可以，如果你使用它作为背景：

.with_before:before{ 
    content:''; 
    background-image: url('http://i.stack.imgur.com/CAAFj.jpg'); 
    background-size: 100% 100%; 
    width: inherit; 
    height: inherit; 
    display: inline-block; 
}

检查这个jsFiddle

而对于你的问题，为什么我们不能风格生成的内容：我们不能因为生成的内容被渲染成一个生成的框，你可以风格该框，而不是内容。

引用：

请注意，不同的浏览器显示出非常不同的行为。

来源

2013-08-28 08:12:16 Tomzan

CSS伪元素大小问题

回答

相关问题