Question

我只是有一个小问题，我希望这是一个简单的解决方案..

网页只是一个整体图片。当用户缩小浏览器窗口或在手机上时，它将更改显示的正面图像。

现在我尝试过每一个方法测试它，分解代码。媒体查询后唯一不起作用的是 .bg 。我可以动态更改背景颜色，因此我知道媒体查询正在工作。我也得到了源链接工作，所以我相信这不是问题。有什么想法吗？

<!doctype html>
<html>
<head>
    <title>backround image</title>

<meta name="viewport" content="width=device-width" />

<style type="text/css">

body{
    background-image: url("../vortex2/vortextwebsite.jpg");
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg {
    max-width: 100%;
    height: auto;
    min-height: 50px;
    min-width: 50px;
    z-index: -3;

}

@media screen and (max-width: 620px) {
.bg:after {
    content: url("../vortex2/vortexWebsitesmall.jpg");
 }
body{
background-color: red
 }
}

@media screen and (min-width: 621px) {
.bg:after {
    content: url("../vortex2/vortextwebsite.jpg");
}
body{
background-color: white
}
}

</style>

</head>
<body>

    <img class = "bg" src="vortextwebsite.jpg" alt="Webpage Background">

</body>

</html>

Answer 1

您正在尝试设置psuedo元素的content属性，该属性没有任何内容属性将其推到现有图像元素之上。如果你想根据css改变图像，我会建议三种选择之一：

使用div而不是使用css更改背景。
使用模板语言来更改图像元素的来源。
有多个基于css隐藏的图像元素。

我认为第一个选项是最好的，因为它需要最少的开销和最少的额外DOM节点。

媒体查询更改图像源无法正常工作

1 个答案: