所以我的背景图片无法在我的Squarespace网站上正确显示mydietgoal（dot）com / legalities
它只保留我设置的黑色背景颜色，但仅此而已。我测试过的代码，当插入codepen时效果很好，但是当我将其插入我的网站时却没有。
javascript在两者上完美运行。但是在我插入图像链接的CSS区域中，它们不会出现。
（对于接下来的2个div容器重复其余的代码，如果它可以用第一个很好的解决方案来解决）
非常感谢你，
克里斯
Codepen：i.imgur.com/M8Jwoy6.png？1 我的网站：mydietgoal（dot）com / legalities
<style>
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #1f1f1f;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
.cont {
position: relative;
overflow: hidden;
height: 100vh;
padding: 80px 70px;
}
.cont__inner {
position: relative;
height: 100%;
}
.cont__inner:hover .el__bg:after {
opacity: 1;
}
.el {
position: absolute;
left: 0;
top: 0;
width: 19.2%;
height: 100%;
background: #252525;
transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s;
will-change: transform, width, opacity;
}
.el:not(.s--active) {
cursor: pointer;
}
.el__overflow {
overflow: hidden;
position: relative;
height: 100%;
}
.el__inner {
overflow: hidden;
position: relative;
height: 100%;
transition: transform 1s;
}
.cont.s--inactive .el__inner {
transform: translate3d(0, 100%, 0);
}
.el__bg {
position: relative;
width: calc(100vw - 140px);
height: 100%;
transition: transform 0.6s 0.7s;
will-change: transform;
}
.el__bg:before {
content: "";
position: absolute;
left: 0;
top: -5%;
width: 100%;
height: 110%;
background-size: cover;
background-position: center center;
transition: transform 1s;
transform: translate3d(0, 0, 0) scale(1);
}
.cont.s--inactive .el__bg:before {
transform: translate3d(0, -100%, 0) scale(1.2);
}
.el.s--active .el__bg:before {
transition: transform 0.8s;
}
.el__bg:after {
content: "";
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.5s;
}
.cont.s--el-active .el__bg:after {
transition: opacity 0.5s 1.4s;
opacity: 1 !important;
}
.el__preview-cont {
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: ease-in-out 0.3s;
}
.cont.s--inactive .el__preview-cont {
opacity: 0;
transform: translateY(10px);
}
.cont.s--el-active .el__preview-cont {
opacity: 0;
transform: translateY(30px);
transition: all 0.5s;
}
.el__heading {
color: #ffffff;
text-transform: uppercase;
font-size: 18px;
}
.el__preview-cont:hover {
opacity: 0;
}
.el__content {
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 30px;
opacity: 0;
pointer-events: none;
transition: all 0.1s;
}
.el.s--active .el__content {
z-index: 2;
opacity: 1;
pointer-events: auto;
transition: all 0.5s 1.4s;
}
.el__text {
text-transform: uppercase;
font-size: 40px;
color: #fff;
}
.el__close-btn {
z-index: -1;
position: absolute;
right: 10px;
top: 10px;
width: 60px;
height: 60px;
opacity: 0;
pointer-events: none;
transition: all 0s 0.45s;
cursor: pointer;
}
.el.s--active .el__close-btn {
z-index: 5;
opacity: 1;
pointer-events: auto;
transition: all 0s 1.4s;
}
.el__close-btn:before,
.el__close-btn:after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 8px;
margin-top: -4px;
background: #fff;
opacity: 0;
transition: opacity 0s;
}
.el.s--active .el__close-btn:before,
.el.s--active .el__close-btn:after {
opacity: 1;
}
.el__close-btn:before {
transform: rotate(45deg) translateX(100%);
}
.el.s--active .el__close-btn:before {
transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);
transform: rotate(45deg) translateX(0);
}
.el__close-btn:after {
transform: rotate(-45deg) translateX(100%);
}
.el.s--active .el__close-btn:after {
transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);
transform: rotate(-45deg) translateX(0);
}
.el__index {
overflow: hidden;
position: absolute;
left: 0;
bottom: -80px;
width: 100%;
height: 100%;
min-height: 250px;
text-align: center;
font-size: 4vw;
text-color: #f57200;
line-height: 0.85;
font-weight: bold;
transition: transform 0.5s, opacity 0.3s 1.4s;
transform: translate3d(0, 1vw, 0);
}
.el:hover .el__index {
transform: translate3d(0, 0, 0);
}
.cont.s--el-active .el__index {
transition: transform 0.5s, opacity 0.3s;
opacity: 0;
}
.el__index-front {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.el__index-back,
.el__index-front {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.el__index-back {
color: #2f3840;
opacity: 0;
transition: opacity 0.25s 0.25s;
}
.el:hover .el__index-back {
transition: opacity 0.25s;
opacity: 0;
}
.el__index-overlay {
overflow: hidden;
position: relative;
transform: translate3d(0, 100%, 0);
transition: transform 0.3s 0.1s;
color: transparent;
}
.el__index-overlay:before {
content: attr(data-index);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
color: #f57200;
transform: translate3d(0, -100%, 0);
transition: transform 0.3s 0.1s;
}
.el:hover .el__index-overlay {
transform: translate3d(0, 0, 0);
}
.el:hover .el__index-overlay:before {
transform: translate3d(0, 0, 0);
}
.el:nth-child(1) {
transform: translate3d(0%, 0, 0);
transform-origin: 50% 50%;
}
.cont.s--el-active .el:nth-child(1):not(.s--active) {
transform: scale(0.5) translate3d(0%, 0, 0);
transition: transform 0.95s, opacity 0.95s;
}
.el:nth-child(1) .el__inner {
transition-delay: 0s;
}
.el:nth-child(1) .el__bg {
transform: translate3d(0%, 0, 0);
}
.el:nth-child(1) .el__bg:before {
transition-delay: 0s;
background-image: url("https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59d53a662278e77f4c59a518/1507146344134/background-security-my-diet-goal-privacy-policy-hd.jpg");
}
</style>