整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
雄：又到了技術大黍講技術的時刻，技術雖然干，但持續就會有收獲。
話不多說有請技術大黍！
技術大黍：今天用對話場景給大家學CSS分割圖片的方法。
學生：老師，在嗎？能不能給我講講CSS分割圖片的方法呀？有點懵。
老師：是通過i標簽，把一個很多圖標的圖片，分割出來的那個嗎？
學生：不是，是background:url("") X,Y坐標，我看很多網頁設計都是這樣寫，但XY坐標畢竟只是一個點，怎么知道是那一張圖片？應該說圖片中的那一個部分
老師：那就是這個啥
老師：background-image以及background-position 它們分別的作用知道是什么意思嗎？
學生：不太熟
老師：backgroun-image是設置背景圖片、background-position是設置背景圖片的位置，你可以先看看這兩個樣式的作用
學生：明白，但background-position是否也需要子絕對，父相對?
老師：不需要哦 ，那個是相對定位，這里是設置背景圖片位置，跟相對和絕對沒任何關系
老師：分割圖片就是用這兩個樣式來實現的
學生：剛才的兩個樣式搞清楚了，能細講一下如何分割的嗎？
老師：我們就拿這張圖來舉例
老師：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用background分割圖標</title>
</head>
<body>
<i></i>
</body>
</html>現在網頁中 我只放了一個i標簽，打開之后 肯定是什么都沒有的
一片空白
學生：嗯，明白
老師：接下來，我們先打開PS，拿到對應圖標的寬高以及位置
老師：你說說，那張圖片，你想要展示那個圖標吧，你選一個
學生：就apple吧
老師：這個么？
學生：對
老師：在PS里面，我們可以看到，蘋果的寬高是30*36，單位是像素
老師：再看位置，蘋果在x軸的位置是62，y軸的位置是310，單位依然是像素
老師：注意，這個位置是以蘋果的左上角為參考的
學生：OK
老師：嗯，有了這兩個數據，那么我們就可以開始寫代碼了
老師：嗯，有了這兩個數據，那么我們就可以開始寫代碼了
老師：先把i標簽設定為，行塊布局方式，這樣才能設置寬高，接著設置背景圖片以及寬高
<style type="text/css">
i {
display: inline-block;
background-image: url("./imgs/main_icons.png");
width: 30px;
height: 36px;
}
</style>老師：運行之后，我們看到，這里有一點點頭
老師：從新回到PS，我們可以看到，這個頭，其實就是放大鏡的那點點
老師：也就是說，我們設置寬高之后，多余的被裁切了，這個沒問題吧？
學生：沒問題
老師：好，現在關鍵的來了
學生：用代碼移動裁剪框？
老師：對對對， 這張背景圖片，我們只能看到，我們設定的寬高的區域，接下來，我們就通過background-position，移動背景圖片
老師：把我們想要的那個圖標，移動到這個現實區域就行了
老師：那移動多少呢？當然就是剛才我們測量的距離，也就是63*310
老師：那么背景圖片，x軸是不是應該往左邊移動63像素？
老師：往左邊，是不是應該是-62px，同理，y軸是不是應該為-310px
<style type="text/css">
i {
display: inline-block;
background-image: url("./imgs/main_icons.png");
width: 30px;
height: 36px;
background-position: -62px -310px;
}
</style>老師：現在我們看到，是不是蘋果圖標 出來了？
學生：也就是說移動的是圖片，X和Y軸是不動的？所以才是-的？
老師：我們移動的其實是那張背景圖片，那個顯示窗口其實是沒變的，根據網頁標準文檔流原理，元素向左移動，就是負的
學生：懂了
技術大黍：今天的分享到這就結束了，謝謝小伙伴們。
大雄：好的，謝謝技術大黍。學會的小伙伴們記得‘點贊+訂閱+關注+評論+轉發’，沒學會的小伙伴們，那就多看幾遍，哈哈哈~~
一、基本線條：
1、<HR>
2、align線條位置（可選left、right、center）；width線條長度；color顏色；size厚度
<HRalign=center width=300 color=#987cb9SIZE=1>二、特效（效果并不是孤立的，可相互組合）
1、兩頭漸變透明：
<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=2)" width="80%"color=#987cb9 SIZE=10>2、紡錘形：
<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=1)" width="80%"color=#987cb9 SIZE=3>3、右邊漸變透明：
<HR style="FILTER:alpha(opacity=0,finishopacity=100,style=1)" width="80%"color=#987cb9 SIZE=3>4、左邊漸變透明：
<HR style="border:1 dashed #987cb9" width="80%"color=#987cb9 SIZE=1>5、虛線：
<HR style="border:3 double #987cb9" width="80%"color=#987cb9 SIZE=3>6、雙線：
<HR style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)"width="80%" color=#987cb9 SIZE=1>7、立體效果：
<HR style="FILTER:progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)"width="80%" color=#987cb9 SIZE=1>8、鋼針效果：
<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">９．垂直分割線
<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">
HTML代碼：
<hr style="border: 1px dotted #FF0000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
