如何使用 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.