请告诉我为什么:before
伪元素在这种情况下的行为不像常规img
:
左边一个是div
,里面有img
,img
的宽度和高度等于100%。正确的一个是div
:before
,:before
的宽度和高度也是100%,但效果不同!
(我知道我可以使用background-image
解决方法,但:pseudo
属性为content
时url()
出现了什么问题?)
答案 0 :(得分: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
对于您的问题,为什么我们无法设置生成的内容样式: 我们不能因为生成的内容被渲染到生成的框中,并且可以设置该框的样式,而不是内容。
参考:
请注意,不同的浏览器显示的行为非常不同。