CSS伪元素大小问题

时间:2013-08-28 07:54:04

标签: html css pseudo-element

请告诉我为什么:before伪元素在这种情况下的行为不像常规img

enter image description here

左边一个是div,里面有imgimg的宽度和高度等于100%。正确的一个是div :before:before的宽度和高度也是100%,但效果不同!

(我知道我可以使用background-image解决方法,但:pseudo属性为contenturl()出现了什么问题?)

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

1 个答案:

答案 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

对于您的问题,为什么我们无法设置生成的内容样式: 我们不能因为生成的内容被渲染到生成的框中,并且可以设置该框的样式,而不是内容。

参考:

  1. check this post
  2. another lengthy discussion on this subject
  3. 请注意,不同的浏览器显示的行为非常不同。