CSS中怎么實現圖片分割效果，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
<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>
下面看一下頁面上顯示的結果是什么
通過css我們把一個圖片，分成二部分。
當我們定義了background-position: 0 0;此時背景圖片將被定位于對象不包括補丁( padding )的內容區域的左上角，height:50px;width:50px;通過這個屬性設置，也就是說向右下拉了一塊面積。
當我們定義了background-position: 100％ 100％;此時背景圖片將被定位于對象不包括補丁( padding )的內容區域的右下角，height:50px;width:50px;通過這個屬性設置，也就是說向左上拉了一塊面積。
關于CSS中怎么實現圖片分割效果問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
