请告诉我为什么 :before
伪元素在这种情况下不像常规 img
那样:
左边一个是 div
里面有一个 img
并且 img
的宽度和高度等于 100% 。右边的是div
,:before
和:before
的宽高也是100%,但是效果不一样!
(我知道我可以使用 background-image
解决方法,但是当 content
属性为 时
?):pseudo
出了什么问题>url()
fiddle :http://jsfiddle.net/Tp9JG/4/
最佳答案
不幸的是,当通过内容指定图像时,您无法控制图像的大小, 但如果您将其用作背景,则可以:
.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
关于为什么我们不能为生成的内容设置样式的问题: 我们不能,因为生成的内容会呈现到生成的框中,您可以设置该框的样式,但不能设置内容的样式。
引用文献:
请注意不同的浏览器表现出非常不同的行为。
关于html - CSS 伪元素大小问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18482219/