我有一个带有 background-image: url() 的 div,在 2 个 div 内,但是我看不到图像,我也不知道为什么,虽然我把它放在我的第一个上时可以看到我的 background-image: url()分区有谁知道如何解决这个问题?谢谢 :)
* {
box-sizing: border-box;
}
html {
width: 100%;
height: 100vh;
margin: 0 auto;
padding: 0 auto;
}
body {
width: 100%;
height: 100vh;
margin: 0 auto;
padding: 0 auto;
}
.content-wrapper {
text-align: center;
max-width: 100%;
width: 85%;
margin-left: auto;
margin-right: auto;
background-color: beige;
}
#projects-wrapper {
height: 100vh;
}
.inner-wrapper {
width: auto;
height: auto;
top: 6px;
right: 6px;
left: 6px;
bottom: 6px;
overflow: hidden;
}
.photo {
width: auto;
height: auto;
min-width: 100.1%;
min-height: 100.1%;
}
.project.x4 {
width: 100%;
height: calc(0.86624 * 29vw);
float: left;
background-color: coral;
}
<body>
<div class="content-wrapper">
<div id="projects-wrapped">
<article class="project x4">
<div class="inner-wrapper">
<div class="photo" style="background-image: url(FOTOS/CHIPS_AHOY_STYLEFRAME_FR_v02.3.jpg); background-position: center;background-size: cover;"> </div>
</div>
</article>
</div>
</div>
</body>
最佳答案
首先,您的 ID 名称 #projects-wrapper
中有拼写错误。在 html 中,您将其编写为 projects-wrapped
。
并且您应该为您的 div 指定高度,否则如果其中的内容没有高度,它将采用 0 高度。
关于javascript - 看我的背景图片 : url() inside of other div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55285032/