使用CSS實現圖片分割效果的簡單方法介紹

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 使用CSS實現圖片分割效果的簡單方法介紹

編輯：CSS詳解

這篇文章主要介紹了使用CSS實現圖片分割的簡單方法介紹,這種方法只是單純地在移動像素點而提供一個臨時的解決方案,需要的朋友可以參考下

我們來看一個例子，大家肯定能明白CSS是怎麼樣實現分割圖片的。

CSS Code復制內容到剪貼板

<Html>
<head>
<meta http-equiv="Content-Type" content="text/Html; charset=utf8" />
<style type="text/CSS">
.photo1 {
background-image: url("CSS_cut.gif"); #定義了一個背景圖片
background-position: 100% 100%; #背景位置放到最右下角
height: 50px; #div的高度
width: 50px; #div的寬度
}
.photo2 {
background-image: url("CSS_cut.gif"); #定義了一個背景圖片，和上面的圖片是一樣的
background-position: 0 0; #背景位置放到最左上角
height: 50px; #div的高度
width: 50px; #div的寬度
}
</style>
</head>
<body>
<div class="photo1"> </div>
<strong>他們二個分家了</srong>
<div class="photo2"> </div>
</body>
</Html>

2016129120239174.gif (50×100)

下面看一下頁面上顯示的結果是什麼
2016129120511718.gif (124×135)

通過CSS我們把一個圖片，分成二部分。
當我們定義了background-position: 0 0;此時背景圖片將被定位於對象不包括補丁( padding )的內容區域的左上角，height:50px;width:50px;通過這個屬性設置，也就是說向右下拉了一塊面積。
當我們定義了background-position: 100％ 100％;此時背景圖片將被定位於對象不包括補丁( padding )的內容區域的右下角，height:50px;width:50px;通過這個屬性設置，也就是說向左上拉了一塊面積。
上面只是根表像的一點理解。純屬個人觀點

CSS詳解

CSS網頁制作教程:字體單位em簡介: 剛學網頁制作的時候，老師曾經告訴我必須用CSS強制定義字體大小，否則保證每個人都看到一致的效果。這
一個不錯的跑著改變字體顏色的特效，流光益彩文字: <script lan
CSS打造多彩文字特效代碼: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 St

DIV CSS 佈局教程網

相關文章