英文:
Responsive PNG image over background image?
问题
我试图制作一个像这样的页面设计：点击
我已经制作了它。问题是，当我更改网页的分辨率时，元素会重叠，背景div和PNG会有不同的行为，一切看起来很糟糕。（我尝试过使用position: absolute（PNG）和position: relative（背景））
英文:
I'm trying to make a page design like this one: click
I made it, actually. Problem is that when I change the resolution of my webpage, the elements overlap, the background div and the PNG acts different and everything looks awful. (I've tried with position: absolute (PNG) and position: relative (background))
答案1
得分: 0
你可以使用background-size和background-position CSS 属性。你可以尝试以下方式：
body {
background-image: url("your-bg-image.jpg");
background-size: cover;
background-position: center;
}
.responsive-image {
background-image: url("your-image.png");
background-size: contain;
background-position: center;
width: 100%;
height: 100%;
}
英文:
You can use the background-size and background-position CSS properties. You should try this way:
body {
background-image: url("your-bg-image.jpg");
background-size: cover;
background-position: center;
}
.responsive-image {
background-image: url("your-image.png");
background-size: contain;
background-position: center;
width: 100%;
height: 100%;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论