gpt4 book ai didi

html - 媒体查询更改图像源不起作用

转载 作者:行者123 更新时间:2023-11-28 05:02:57 25 4
gpt4 key购买 nike

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

网页只是一张完整的图片。当用户缩小浏览器窗口或使用手机时,它会更改显示的正面图像。

现在我已经尝试以各种方式测试它,分解代码。唯一不起作用的部分是媒体查询之后的 .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>

最佳答案

您正在尝试设置伪元素的内容属性,该元素没有任何内容可以将其推到现有图像元素之上。如果您希望图像根据 css 进行更改,我建议您选择以下三个选项之一:

  1. 改用 div 并使用 css 更改背景。
  2. 使用模板语言更改图像元素的来源。
  3. 有多个基于 css 隐藏的图像元素。

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

关于html - 媒体查询更改图像源不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39987507/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com