我尝试在border
内的图片下创建渐变div
。
我100%确定我的CSS代码本身非常好,因为我之前已经在其他元素上对其进行了测试。
问题在于它以某种方式拒绝选择正确的元素并将伪元素置于其下面。
#profilePicture {
width: 200px;
margin-left: 25px;
border-top: 1px solid #070707;
border-left: 1px solid #070707;
border-right: 1px solid #070707;
}
#pf {
display: block;
width: 200px;
}
#pf:first-child:after {
content: '';
position: absolute;
width: 200px;
height: 1px;
background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707);
background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707);
background: -o-linear-gradient(left, #070707, #a1a1a1, #070707);
background: linear-gradient(to right, #070707, #a1a1a1, #070707);
top: -1px;
left: 0;
}

<div id="profilePicture">
<img id="pf" src="layout/images/profile/pf.png">
</div>
&#13;
据我所知,它应该选择#pf
,它是其父级的第一个子级(true)并在其后添加伪元素?
修改:我确实尝试了top: 1px
和更高高度。这没有效果。
答案 0 :(得分:4)
您无法在::before
标记中使用伪元素(::after
和img
)(至少目前为止)。
查看W3C specs说的内容:
请注意。此规范未完全定义
:before
和:after
与替换元素(例如HTML中的IMG
)的交互。这将在未来的规范中更详细地定义。
所以你必须将伪元素应用于父元素。
此外,您需要在父级中使用position:relative
,因为您在伪元素中应用了position:absolute
。有了它,您将使用DOM将伪元素保留在流中。
请注意,CSS中有一些更改
body {
margin: 0
}
#profilePicture {
width: 200px;
margin-left: 25px;
position: relative;
border: solid #070707;
border-width: 1px 1px 0 1px
}
#pf {
display: block;
}
#profilePicture::after {
content: '';
position: absolute;
width: 200px;
height: 5px;
background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707);
background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707);
background: -o-linear-gradient(left, #070707, #a1a1a1, #070707);
background: linear-gradient(to right, #070707, #a1a1a1, #070707);
bottom: 0;
left: 0;
}
&#13;
<div id="profilePicture">
<img id="pf" src="//dummyimage.com/200x200&text=image">
</div>
&#13;
答案 1 :(得分:3)
您不能将伪元素(:before
和:after
)与img
代码一起使用,在div
附近创建额外img
或添加:after
转而使用#profilePicture
元素。
此外,没有理由在first-child
选择器中使用#pf:first-child:after
,因为页面上只能有一个pf
id的元素。
编辑:
position: relative
添加到您的#profilePicture
top: 1px;
:after
bottom: 0;
添加到:after
答案 2 :(得分:0)
只需为此选择器position:relative
添加#profilePicture
,然后将#profilePicture::after
更改为:
#profilePicture::after {
content: '';
position: absolute;
width: 200px;
height: 1px;
background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707);
background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707);
background: -o-linear-gradient(left, #070707, #a1a1a1, #070707);
background: linear-gradient(to right, #070707, #a1a1a1, #070707);
bottom: 1px;
left: 0;
}