[英]Pseudo element not showing background-image
为什么我的背景图像在伪元素 ::before 中没有出现? 我还测试了用背景颜色替换背景图像,但它仍然不起作用。 这是 SASS 格式,以防有人对嵌套的 ::before 感到疑惑。
.logoframe{ float: left; height: 817px; width: 20%; position: relative; left: -6%; transform: skewX(-11deg); border: 1px solid #e26f6f; &::before{ content: ""; background-image: url('/images/theseven/seven_img_old.png'); background-repeat: no-repeat; position: relative; height: 817px; width: 150px; } }
<div class="logoframe"></div>
“显示”属性。 display 是 CSS 控制布局的最重要的属性。 每个元素都有一个默认显示值,具体取决于它是什么类型的元素。 大多数元素的默认值通常是 block 或 inline 。 块元素通常称为块级元素。
&::before{
content: "";
display: block;/*missing prop*/
background-image: url('/images/theseven/seven_img_old.png');
background-repeat: no-repeat;
position: relative;
height: 817px;
width: 150px;
}
您应该更新下面的 css 部分。 如果您需要在中心的背景图像,请更新背景位置。
.logoframe{ float: left; height: 817px; width: 20%; position: relative; left: 0; transform: skewX(-11deg); border: 1px solid #e26f6f; } .logoframe:before { content: ""; background: url('https://n2.sdlcdn.com/imgs/a/a/1/Chromozome_Yamaha_102025_m_1_2x-4ab77.jpg') 0 0 no-repeat;/* replace 0 0 to center center */ background-repeat: no-repeat; position: absolute; background-size:contain; top:0; left:0; height: 817px; width: 100%; }
<div class="logoframe"></div>
Sometimes you need to add background-size property too with display: block.
&::before{
content: "";
background-image: url('/images/theseven/seven_img_old.png');
background-repeat: no-repeat;
background-size:100%;
position: relative;
height: 817px;
width: 150px;
display:block;
}
我不知道这是否有帮助,但有时如果您使用背景属性的快捷方式,它可能不起作用,但如果您以不同的方式使用这些属性,我认为它可能会起作用。 我是根据经验说的。
.showcase::before {
content: '';
background-image: url(../images/Desert.jpg) no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
但是这个做到了。
.showcase::before {
content: '';
background-image: url(../images/Desert.jpg);
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.