css3 - css將div定位到圖片上的固定位置
問題描述
如圖我有個總的大p,寬度和高度都是不定的,里面的手機線框是背景圖,用的
background-size:contain
定位的,黑框是我想要操作的p,想讓他能覆蓋手機模型的屏幕,而且放大縮小都會剛好限制在手機屏幕內(nèi),該怎么定位呢,能不能實現(xiàn)?
問題解答
回答1:謝邀,這種東西根本不需要啥背景圖。
寫了個demo,點開看css代碼和直接預覽效果。https://jsfiddle.net/vpgL5535/
回答2:我理解的話,“放大縮小都會剛好限制在手機屏幕內(nèi)”指的是寬度適應,如果是要用圖片背景的話,可以考慮用百分比布局。 參考代碼如下(略去不重要的部分):
<p class='frame-container'> <p class='screen-container'> <!-- content here --> </p></p>
.frame-container{ max-width: 559px; min-height: 753px; padding: 13.77% 14.13% 0; background: url(frame.jpg) no-repeat; background-size: 100% auto; box-sizing: border-box;}.screen-container{ padding: 10px; /* 可選,在屏幕范圍內(nèi)仍然增加一點間距比較美觀 */}
對應的結果是:
其中的要點是:
background-size: 100% auto;來使背景圖始終縮放至寬度和外層p一致,并保持寬高比。
padding: 13.77% 14.13% 0;取的分別是手機模型屏幕區(qū)域到背景圖邊緣的距離,從px值轉(zhuǎn)換為百分比值(比例通過像素值除以圖片像素寬度得到)
(可選)max-width: 559px;使外層p不至于超出背景圖大小(背景圖尺寸為753 x 559),min-height使內(nèi)容較少的時候也能看到整個手機模型。
回答3:配色挺漂亮,嚯嚯嚯。
這個黑色線框可以直接寫成“手機的”子元素。放在內(nèi)部用百分比的寬高來控制一下大小,就能自適應了。如:
.phone p { width: 80%; height: 80%; margin: 0 auto; margin-top: 10%;}
相關文章:
1. javascript - angular使從elastichearch中取出的文本高亮顯示,如圖所示2. python bottle跑起來以后,定時執(zhí)行的任務為什么每次都重復(多)執(zhí)行一次?3. javascript - 求幫助 , ATOM不顯示界面!!!!4. 視頻文件不能播放,怎么辦?5. 前端 - 誰來解釋下這兩個 CSS selector 區(qū)別6. python - 爬蟲模擬登錄后,爬取csdn后臺文章列表遇到的問題7. mysql - 分庫分表、分區(qū)、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處8. javascript - vue2如何獲取v-model變量名9. html5 - HTML代碼中的文字亂碼是怎么回事?10. javascript - ios返回不執(zhí)行js怎么解決?
