使用媒体查询时不显示背景图像

Question

我正试图用另一个图像替换一个图像，我知道一种常见的方法是移动一个图像并使用背景图像。不幸的是，当我这样做的时候，它对我来说只是一片空白。

这是一支代码笔，显示了我的意思：

https://codepen.io/TheNomadicAspie/pen/JjWVbKJ

下面是相关的CSS。有什么想法吗？

当我检查控制台时，它返回了一个403禁止的错误。

#main {
display: grid;
grid-template-areas:
'chat_bubble character_image'
'button_menu character_image';
grid-template-columns: 5fr 1fr;
place-items: center;
}
#chat_bubble {
grid-area: chat_bubble;
width: 70vw;
height: 70vh;
padding-left: 2vw;
padding-right: 2vw;
padding-top: 2vh;
padding-bottom: 2vh;
margin-bottom: 1vh;
}
#character_image {
grid-area: character_image;
margin-top: 2vh;
}
#character_image > img {
max-width: 100%;
}
#char_1 {
display: inline-block;
}
#button_menu {
grid-area: button_menu;
display: grid;
grid-template-columns: auto auto;
gap: 1em;
}
@media (max-width: 700px) {
#main {
grid-template-areas:
'chat_bubble chat_bubble'
'button_menu character_image';
grid-template-columns: 4fr 1fr;
}
#character_image > img {
height: 100px;
max-width: unset;
padding-top: 100px;
background-image: url('https://i.imgur.com/sRSVW2D.png') !important;
}

.container:after {
content: '';
position: absolute;
bottom: 0;
top: unset;
right: unset;
left: 75%;
width: 0;
height: 0;
border: 0.813em solid transparent;
border-top-color: #ffffff;
border-bottom: 0;
border-right: 0;
margin-left: -0.406em;
margin-bottom: -0.812em;
}
}

Answer 1

不要在媒体查询中使用背景图像，而是在屏幕上更改图像的src以调整大小。

window.addEventListener('resize', ()=>{
if(window.innerWidth > 700) {
image.src = 'firstimage.jpg';
} else {
image.src = 'secondimage.jpg';
}
});

Answer 2

使用content:url((作为

#character_image > img {
height: 100px;
max-width: unset;
/* padding-top: 100px; */
content: url("https://i.imgur.com/sRSVW2D.png");
}

Codepen