如何使用 css 使背景图像响应？
[英]How do I make a background image responsive using css?
问题描述
我将图像放置为身体的 header 背景图像，并希望使其具有响应性...但是当我更改 window 大小时，背景是响应性的，但是图像似乎在某处剪辑，而实际图像需要在其中焦点消失了……
这是代码：
.topnav { background-image: url(/images/pastry-topnav-bgd-img.jpg); background-size: cover; background-repeat: no-repeat; width: 100%; height: 400px; }
<body> <header> <div class="topnav"></div> </header> </body>
有人可以帮助我如何使图像响应以使背景图像保持焦点并且不会移位太多
1 个解决方案
解决方案1
0 2021-05-23 07:59:17
可能你需要使用这个
background-size: 100% 100%;
而不是使用
background-size: cover
如何仅在图像不是背景图像时使用CSS使图像响应？
[英]How to make image responsive using CSS only when the image is not a background image?
CSS：如何制作不包含图像长宽比的自适应背景图像？
[英]CSS: How to make responsive background image that excluded the aspect ratio of the image?
如何使用css制作页面，背景图像是cover，同时具有滚动和响应能力？
[英]How can I make a page with css,which the background image is cover , with scrolling and also responsive?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.