做一个常规的banner图——负边距的使用、banner图的拼法
生活随笔
收集整理的這篇文章主要介紹了
做一个常规的banner图——负边距的使用、banner图的拼法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在這之前，首先要了解如何設置塊級元素在塊級元素水平居中
方法：
?
設置子容器為定位元素?水平居中
left：50%；margin-left：-width/2；?垂直居中
top：50%；margin-top：-width/2；示例：
?
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">.div1{width: 200px;height: 200px;/*background-image: url(img/002.png);*/background-color: green;border:10px dotted red;background-clip: padding-box;position: relative;overflow: hidden;}.div2{width: 100px;height: 100px;background-color: palevioletred;position: absolute;left: 50%;margin-left: -50px;top: 50%;margin-top: -50px;}</style></head><body><!----><div class="div1"><div class="div2"></div></div></body> </html>?
效果圖：
?
掌握了上邊的方法，我們就可以做個比較標準的banner圖了。
下邊是一個沒有被切的banner 圖的做法：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#zb_banner{width: 100%;height:345px;position: relative;/*background-position: -260px 0px;*/overflow: hidden; } #zb_banner .c_ban{width: 1920px;height: 345px;background-image: url(../img/a01d20c11e264df890bd3e629e2420b0.jpg);background-repeat: no-repeat;position: absolute;left: 50%;margin-left: -960px;}</style></head><body><section id="zb_banner"><div class="c_ban"></div></section></body> </html>?
效果圖如下：
最大化下的狀態：
?
?縮小窗口后的效果：
?
?
因為現在主流最大的顯示屏是1920的，所以banner圖一般也做成1920的，被切開的話，放到一個寬度1920的div里邊就可以了，不用調整圖的大小。只有這么設置才會不會因為瀏覽器窗口大小的變化而影響banner圖的居中位置，也可以使被切開的banner圖能夠完整的拼起來，不會變形。
?
轉載于:https://www.cnblogs.com/cherishli/p/6579585.html
總結
以上是生活随笔為你收集整理的做一个常规的banner图——负边距的使用、banner图的拼法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Objective-C反射机制
- 下一篇： linux进程互斥要点,linux进程之