超越梯度的背景图像
超越梯度的背景图像
提问于 2022-02-28 16:47:04
我有一个问题，我的背景图像延伸到屏幕分辨率以外，但它似乎只发生在移动景观模式。这是我的css代码；
#my-thing {
height: 100%;
background-color: rgb(10, 0, 0);
background-image: linear-gradient(rgba(100, 15, 15, 0.5) 5%, rgba(10, 0, 0, 1) 80%), url("assets/brickBackground.png");
background-repeat: repeat-x;
}<div id="my-thing"></div>
这个想法是，有一个图像，是通过一个梯度转换成一个坚实的背景颜色。它在桌面和移动平台上运行良好，但不适用于景观模式。渐变填充屏幕，但当引入滚动-y时，图像会延伸到更长的范围。我认为这是因为图像高度，但我不知道如何正确地做到这一点，而不影响梯度或拉伸图像正常。媒体查询？我不太确定。我有点新的css，所以我道歉，并感谢任何帮助。谢谢。
带有来自：https://stackoverflow.com/a/19209651/125981的图像的新片段
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
#my-thing {
height: 100%;
background-color: rgb(10, 0, 0);
background-image: linear-gradient(rgba(100, 15, 15, 0.5) 5%, rgba(10, 0, 0, 1) 80%), url("https://i.stack.imgur.com/aH5zB.jpg");
background-repeat: repeat-x;
}<div id="my-thing"></div>
回答 2
Stack Overflow用户
发布于 2022-02-28 17:06:26
不过，尝试一下background-size: cover;，只有一件事。您使用的是repeat-x，所以您确定图像比它应该的大吗?还是仅仅是水平地重复？
Stack Overflow用户
发布于 2022-03-01 17:03:10
试一试
#my-thing {
height: 100%;
background-color: rgb(10, 0, 0);
background-image: linear-gradient(rgba(100, 15, 15, 0.5) 5%,
rgba(10, 0, 0, 1) 80%), url("https://i.stack.imgur.com/aH5zB.jpg");
background-repeat: no-repeat;
background-size: cover;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71298339
复制相关文章
相似问题
腾讯云开发者
