整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
雄：又到了技術(shù)大黍講技術(shù)的時(shí)刻，技術(shù)雖然干，但持續(xù)就會有收獲。
話不多說有請技術(shù)大黍！
技術(shù)大黍：今天用對話場景給大家學(xué)CSS分割圖片的方法。
學(xué)生：老師，在嗎？能不能給我講講CSS分割圖片的方法呀？有點(diǎn)懵。
老師：是通過i標(biāo)簽，把一個很多圖標(biāo)的圖片，分割出來的那個嗎？
學(xué)生：不是，是background:url("") X,Y坐標(biāo)，我看很多網(wǎng)頁設(shè)計(jì)都是這樣寫，但XY坐標(biāo)畢竟只是一個點(diǎn)，怎么知道是那一張圖片？應(yīng)該說圖片中的那一個部分
老師：那就是這個啥
老師：background-image以及background-position 它們分別的作用知道是什么意思嗎？
學(xué)生：不太熟
老師：backgroun-image是設(shè)置背景圖片、background-position是設(shè)置背景圖片的位置，你可以先看看這兩個樣式的作用
學(xué)生：明白，但background-position是否也需要子絕對，父相對?
老師：不需要哦 ，那個是相對定位，這里是設(shè)置背景圖片位置，跟相對和絕對沒任何關(guān)系
老師：分割圖片就是用這兩個樣式來實(shí)現(xiàn)的
學(xué)生：剛才的兩個樣式搞清楚了，能細(xì)講一下如何分割的嗎？
老師：我們就拿這張圖來舉例
老師：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用background分割圖標(biāo)</title>
</head>
<body>
<i></i>
</body>
</html>現(xiàn)在網(wǎng)頁中 我只放了一個i標(biāo)簽，打開之后 肯定是什么都沒有的
一片空白
學(xué)生：嗯，明白
老師：接下來，我們先打開PS，拿到對應(yīng)圖標(biāo)的寬高以及位置
老師：你說說，那張圖片，你想要展示那個圖標(biāo)吧，你選一個
學(xué)生：就apple吧
老師：這個么？
學(xué)生：對
老師：在PS里面，我們可以看到，蘋果的寬高是30*36，單位是像素
老師：再看位置，蘋果在x軸的位置是62，y軸的位置是310，單位依然是像素
老師：注意，這個位置是以蘋果的左上角為參考的
學(xué)生：OK
老師：嗯，有了這兩個數(shù)據(jù)，那么我們就可以開始寫代碼了
老師：嗯，有了這兩個數(shù)據(jù)，那么我們就可以開始寫代碼了
老師：先把i標(biāo)簽設(shè)定為，行塊布局方式，這樣才能設(shè)置寬高，接著設(shè)置背景圖片以及寬高
<style type="text/css">
i {
display: inline-block;
background-image: url("./imgs/main_icons.png");
width: 30px;
height: 36px;
}
</style>老師：運(yùn)行之后，我們看到，這里有一點(diǎn)點(diǎn)頭
老師：從新回到PS，我們可以看到，這個頭，其實(shí)就是放大鏡的那點(diǎn)點(diǎn)
老師：也就是說，我們設(shè)置寬高之后，多余的被裁切了，這個沒問題吧？
學(xué)生：沒問題
老師：好，現(xiàn)在關(guān)鍵的來了
學(xué)生：用代碼移動裁剪框？
老師：對對對， 這張背景圖片，我們只能看到，我們設(shè)定的寬高的區(qū)域，接下來，我們就通過background-position，移動背景圖片
老師：把我們想要的那個圖標(biāo)，移動到這個現(xiàn)實(shí)區(qū)域就行了
老師：那移動多少呢？當(dāng)然就是剛才我們測量的距離，也就是63*310
老師：那么背景圖片，x軸是不是應(yīng)該往左邊移動63像素？
老師：往左邊，是不是應(yīng)該是-62px，同理，y軸是不是應(yīng)該為-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>老師：現(xiàn)在我們看到，是不是蘋果圖標(biāo) 出來了？
學(xué)生：也就是說移動的是圖片，X和Y軸是不動的？所以才是-的？
老師：我們移動的其實(shí)是那張背景圖片，那個顯示窗口其實(shí)是沒變的，根據(jù)網(wǎng)頁標(biāo)準(zhǔn)文檔流原理，元素向左移動，就是負(fù)的
學(xué)生：懂了
技術(shù)大黍：今天的分享到這就結(jié)束了，謝謝小伙伴們。
大雄：好的，謝謝技術(shù)大黍。學(xué)會的小伙伴們記得‘點(diǎn)贊+訂閱+關(guān)注+評論+轉(zhuǎn)發(fā)’，沒學(xué)會的小伙伴們，那就多看幾遍，哈哈哈~~
一、基本線條：
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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
