div+css背景圖片的定位取圖方法
CSS中背景圖片定位方法
關鍵字: css中背景圖片定位方法
在CSS中,背景圖片的定位方位有3種:
1)關鍵字:background-position: top right;
2)畫素:background-position: 0px 0px;
3)百分比:background-position: 0% 0%;
上面這三句語句,都將圖片定位在背景的左上角,表面上看效果是一樣的,實際上第三種定位機制與前兩種完全不同。
前兩種定位,都是將背景圖片左上角的原點,放置在規定的位置。請看下面這張圖,規定的位置是“20px 10px”和”60px 50px”,都是圖片的原點在那個位置上,圖中用X表示。
但是第三種定位,也就是百分比定位,不是這樣。它的放置規則是,圖片本身(x%,y%)的那個點,與背景區域的(x%,y%)的那個點重合。比如,如果放置位置是“20% 10%”,實際結果如下圖,可以看到這個點是在圖片本身的“20% 10%”的位置上。
下面是一個有趣的例子。
背景圖片是四個邊長為100px的方塊疊在一起:請問怎樣才能將其橫過來? 答案是,在網頁中先設定四個div區域:
<div class=”box1″>
</div>
<div class=”box2″”>
</div>
<div class=”box3″>
</div>
<div class=”box4″>
</div>
然後,這樣編寫CSS:
.box1, .box2, .box3, .box4 {
float:left;
width:100px;
height:100px;
position:relative;
background: #F3F2E2 url(1234.png) no-repeat;
}
.box1 {
background-position:0% 0%;
}
.box2 {
background-position:0% 33.33333%;
}
.box3 {
background-position:0% 66.66666%;
}
.box4 {
background-position:0% 100%;
}可以看到第二和第三個方塊的設定,並不是一般想象中的“0% 25%”和“0% 75%”。
不過說實話,這個例子用畫素設定法更容易一些。使用百分比設定的主要優勢在於,當頁面縮放的時候,背景圖片也會跟著一起縮放。
/*盒子的css樣式*/
#box{ width:500px; height:180px; border:1px #ccc solid;}
/*全部重複背景*/
.repeat{ background:url(bg.gif);}
/*水平方向重複*/
.repeatx{ background:url(bg.gif) repeat-x;}
/*垂直方向重複*/
.repeaty{ background:url(bg.gif) repeat-y;}
/*背景不重複*/
.norepeat{ background:url(bg.gif) no-repeat;}
/*背景左側中間對齊*/
.left{ background:url(bg.gif) no-repeat left center;}
/*背景右側中間對齊*/
.right{ background:url(bg.gif) no-repeat right center;}
/*圖片背景水平方向和垂直方向都居中*/
.center{ background:url(bg.gif) no-repeat center center;}
/*圓心是左側上部的 那個點 距離水平方向50px 垂直方向20px*/
.dingwei{ background:url(bg.gif) no-repeat 50px 20px;}
相關文章
- CSS中背景圖片定位方法CSS
- JavaScript獲取背景圖片定位值JavaScript
- 背景圖-background定位
- 美圖秀秀怎麼給圖片新增背景?美圖秀秀給圖片新增背景的教程
- CSS3 background-position定位背景圖片動畫效果CSSS3動畫
- HTML連載79-背景圖片定位區域屬性、背景顏色HTML
- CSS3背景圖的定位技巧CSSS3
- CSS背景圖片集中在同一個圖片CSS
- Swift iOS : WebView快取圖片的方法SwiftiOSWebView快取
- CSS · 兩種背景圖片CSS
- JavaScript設定背景圖片JavaScript
- css 背景圖片屬性CSS
- WPF 按鈕背景圖片
- CSS如何控制背景圖片的位置CSS
- Win10快速更換登入背景圖片的方法Win10
- 小程式背景圖片問題
- Android ImageView 清空背景圖片AndroidView
- JavaScript設定背景圖片位置JavaScript
- 為view設定背景圖片View
- 一個去掉圖片背景的網站網站
- 大量影片批次新增背景圖片的操作
- 實現背景圖片的全屏拉伸效果
- 小程式之背景圖片的載入
- 巧妙的有css合併圖片解決tab切換的背景圖片CSS
- 快取圖片快取
- 圖片快取快取
- css中背景定位的方法CSS
- CSS-背景圖片|background-imageCSS
- 小程式button背景顯示圖片
- html+css 設定背景圖片HTMLCSS
- IDEA 修改編輯背景圖片Idea
- CSS設定背景圖片程式碼CSS
- Android ListView(Selector 背景圖片)AndroidView
- CSS hack前傳——背景圖片全屏CSS
- iOS 顏色製作背景圖片iOS
- css切背景圖片(background-position)CSS
- Java 將PDF轉為透明背景的圖片Java
- 滑鼠滑過改變元素的背景圖片