::after 伪元素出现在之前 [英] ::after pseudo element appearing before
本文介绍了::after 伪元素出现在之前的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在渐变的顶部和底部创建一个微妙的波浪.但是, ::after 伪元素出现在主要内容之前而不是之后.目前它显示为 ::before、::after、主要内容,但我希望它显示为 ::before、主要内容、::after.
I'm trying to create a subtle wave on the top and bottom of a gradient. However, the ::after pseudo element is appearing before the main content and not after. Currently it's showing as ::before, ::after, main content, but I want it to show as ::before, main content, ::after.
这是我的代码:
#gradient {
background: #0068a9;/* For browsers that do not support gradients */
background: -webkit-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Safari 5.1-6*/
background: -o-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Opera 11.1-12*/
background: -moz-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Fx 3.6-15*/
background: linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Standard*/
width: 100%;
height: 300px;
min-height: 0px;
display: block;
}
#gradient::before,
#gradient::after {
display: block;
content: "";
width: 100%;
height: 75px;
}
#gradient::before {
background: #f2f2f2 url("http://www.qumidesignco.com/clients/preparedcapital/pc_topcurve.png") center top;
}
#gradient::after {
background: #f2f2f2 url("http://www.qumidesignco.com/clients/preparedcapital/pc_bottomcurve.png") center top;
}
<div style="background:#f2f2f2; width: 100%; height: 300px; min-height: 0px; display:block;"></div>
<div id="gradient"></div>
<div style="background:#f2f2f2; width: 100%; height: 300px; min-height: 0px; display:block;"></div>
推荐答案
Make your gradient div
relative
, :before and :after
<:before
中的 code>absolute 和 top:0
和 :after
中的 bottom:0
Make your gradient div
relative
, :before and :after
absolute
and top:0
in :before
and bottom:0
in :after
#gradient {
background: #0068a9;/* For browsers that do not support gradients */
background: -webkit-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Safari 5.1-6*/
background: -o-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Opera 11.1-12*/
background: -moz-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Fx 3.6-15*/
background: linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Standard*/
width: 100%;
height: 300px;
min-height: 0px;
display: block;
position: relative;
}
#gradient::before,
#gradient::after {
display: block;
content: "";
width: 100%;
height: 75px;
position: absolute;
}
#gradient::before {
background: #f2f2f2 url("http://www.qumidesignco.com/clients/preparedcapital/pc_topcurve.png") center top;
top:0;
}
#gradient::after {
background: #f2f2f2 url("http://www.qumidesignco.com/clients/preparedcapital/pc_bottomcurve.png") center top;
bottom: 0;
}
<div style="background:#f2f2f2; width: 100%; height: 300px; min-height: 0px; display:block;"></div>
<div id="gradient"></div>
<div style="background:#f2f2f2; width: 100%; height: 300px; min-height: 0px; display:block;"></div>
这篇关于::after 伪元素出现在之前的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文