整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
于學習前端的小伙伴來說css是不是一點都不陌生呢，從開始學習前端就接觸的css你真的熟練了嗎？今天小猿圈web前端講師講解怎么從CSS圖片中摳出一部分（雪碧圖）。
這里咱們會用到一個css屬性：background-position。
按照字面理解，這個屬性就是背景定位，下面咱們來具體操作一下：
咱們拿到一個圖：
HTML結構是：
<div></div>
CSS代碼是：
div{
background: url('bg.png') no-repeat;
}
比如咱們現在想要哪個手機，通過ps測量到哪個手機到尺寸是，寬度（10px）、高度（16px），那么咱們調整一下css：
div{
background: url('bg.png') no-repeat;
width:10px;
height: 16px;
}
運行結果：
手機這個小圖混雜在大圖中，想提取出來，需要用background-position屬性，background-position它有兩個參數，分別是水平方向移動的像素、豎直方向移動的像素，都用負數表示。
因此，只要找到小圖相對于大圖左上角頂點的水平移動像素、豎直移動像素就可以了。
經過測量以后的css調整為：
div{
background: url('bg.png') no-repeat;
width:10px;
height: 16px;
background-position: -299px -243px;
}
以上就是小猿圈web前端老師針對雪碧圖的簡單介紹，對于你熟悉的css是否有了新的理解了呢，那還在等什么，快去行動呀，記得如果遇到了不懂問題可以到小猿圈尋找答案，里面有最新最全面的視頻等著你去學習。
篇文章我們講解了webpack中的loader，并且使用less、less-loader、css-loader、style-loader，將一個在js中import的less文件通過webpack將樣式打包到了頁面中，但是我們發現，頁面中樣式確實是有了，但是頁面的樣式是通過style標簽的形式寫入到了頁面中，在實際開發中我們其實更傾向于使用link標簽導入樣式，這時候應該怎么做呢？
一、使用mini-css-extract-plugin插件
這個插件能將CSS提取為獨立的文件，對每個包含css的js文件都會創建一個CSS文件，支持按需加載css和sourceMap。
首先安裝插件
cnpm install mini-css-extract-plugin --save-dev
安裝完插件后其實就是設置了，下面是簡單的設置信息：
const { CleanWebpackPlugin }=require('clean-webpack-plugin');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
module.exports={
mode:"development",
entry:{
"common":"./src/js/common.js",
"index":"./src/js/index.js",
"login":"./src/js/login.js"
},
output:{
filename:"js/[name].js",
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:["common","index"],
hash:true
}),
new HtmlWebpackPlugin({
template:'./src/login.html',
filename:'login.html',
chunks:["common","login"],
hash:true
}),
new MiniCssExtractPlugin({
filename:'css/[name].css',
chunkFilename:'[id].css'
})
],
module:{
rules:[
// {
// test:/\.less$/,
// use:[
// {loader:"style-loader"},
// {loader:"css-loader"},
// {loader:"less-loader"}
// ]
// }
{
test:/\.less$/,
use:[
{
loader:MiniCssExtractPlugin.loader
},
"css-loader",
"less-loader"
]
},
]
}
}
在webpack.config.js中我們首先定義插件，然后在plugins項中實例化插件（前面講到了插件需要安裝、定義、實例化三步），最后在module中定義處理less的規則，注釋掉的部分是講解loader的時候使用的，沒刪掉是要做個比較。
plugins項中mini-css-extract-plugin的實例化參數filename其實和output，html-webpack-plugin中定義的filename，完全一樣，就是給輸出文件起名字（有人可能會說不是在output中定義了嗎，其實webpack入口與輸出只是js，其他的是靠插件或者loader來處理，所用不要弄混）。
chunkFilename和html-webpack-plugin中的chunk類似，但是后面的[id].css不好理解（實在明白就這樣寫就行，固化的不會變），其實這個地方沒法寫實際具體的名字的，因為這是下面的loader中mini-css-extract-plugin插件內部自己產生的。
再來看rules中的定義，我們去掉了style-loader，因為我們不是要把樣式寫的頁面中，我們是希望link單獨的css文件。規則的意思就是遇到js中導入的以.less為結尾的文件使用less-loader來處理，然后轉換成css，然后讓css-loader處理樣式內部的一些關于url，或者@import等一些css的問題，然后交給下一個loader，這個時候的loader變成了mini-css-extract-plugin中的loader了，這個laoder就是將css單獨提取出來放入頁面中，如下圖：
二、處理圖片資源
頁面中有三種圖片的引用方式，一種是html頁面中的 img標簽，一種是樣式中類似background:url()，一種是是腳本中創建圖片并插入頁面的。那么我們就將這三種方式都嘗試一下。項目目錄如下圖：
增加了三個圖片，其實就是一個圖片就是名字不一樣而已。然后分別修改less文件，js文件，html文件，各個文件內容如下：
index.less
index.js
index.html
圖片資源的處理有很多loader可以用，這里我們使用url-loader，對于頁面中的img標簽，我們使用html-withimg-loader。
安裝loader：
cnpm install url-loader html-withimg-loader --save-dev
然后配置webpack.config.js：
const { CleanWebpackPlugin }=require('clean-webpack-plugin');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
module.exports={
mode:"development",
entry:{
"common":"./src/js/common.js",
"index":"./src/js/index.js",
"login":"./src/js/login.js"
},
output:{
filename:"js/[name].js",
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:["common","index"],
hash:true
}),
new HtmlWebpackPlugin({
template:'./src/login.html',
filename:'login.html',
chunks:["common","login"],
hash:true
}),
new MiniCssExtractPlugin({
filename:'css/[name].css',
chunkFilename:'[id].css'
})
],
module:{
rules:[
{
test:/\.less$/,
use:[
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath:"../"
}
},
"css-loader",
"less-loader"
]
},
{
test:/\.(png|svg|jpg|gif)$/,
use:[
{
loader:'url-loader',
options:{
limit:10240,
name:"imgs/[name].[ext]",
}
}
]
},
{
test:/\.(htm|html)$/,
use:["html-withimg-loader"]
}
]
}
}
這里需要注意幾點：
第一、minicssextractplugin中添加了一個配置publicPath，為什么不把它放到output中？因為output中的pubicPath會影響所有路徑。這里面我們只是想讓css-loader處理完css后只解決樣式表里的路徑問題。
第二、url-loader，limit參數，當圖片文件小于10K的時候，將文件轉換成dataUrl格式的圖片減少鏈接請求，name參數就是生成的文件名稱，當然前面的imgs是dist目錄下的imgs文件夾。
第三、遇到html或者htm結尾的文件時使用html-withimg-loader處理里面的圖片資源。
前端的模塊化開發不建議在頁面中直接使用圖片鏈接，要在js中導入圖片，但我感覺不太現實，畢竟img標簽不是擺設。
接下來運行 npx webpack命令，效果如下：
我們的圖片是50多K大小所以dist目錄下生成了imgs文件夾，并且將src中的圖片考了過來。
如果我們將limit的值改為102400后，圖片將直接轉換成dataurl格式，不在保存到dist目錄下，入下圖：
我們可以發現他們的鏈接地址是有區別的。
三、總結
我們分了五節內容簡單的描述了webpack4最基本的一些知識點，主要包括：
1、安裝
前提條件安裝node
在項目中使用npm init -y，初始化項目，主要是創建了一個package.json的文件，用來記錄項目信息以及依賴關系。
為了避免插件或者loader下載不了，介紹了cnpm。
2、入口與輸出
webpack.config.jswebpack的配置文件
npx webpack運行webpack的命令
最基本的入口與輸出的概念
3、插件
clear-webpack-plugin 清除dist目錄的插件
html-webpack-plugin 簡化html創建的一個插件，并且關聯js
mini-css-extract-plugin 單獨提起css為文件的插件
4、加載器（loader）
model模式（開發模式，產品模式）
less-loader、css-loader、style-loader、url-loader、html-withimg-loader
這些知識點只是讓初學者快速的跑起來一個webpack，避免踩坑，在實際的項目中遇到問題時可以知道具體知道從哪方面入手來解決問題。
如果內容中有錯誤，歡迎大家指正。謝謝！
網站設計編輯中，我們會往往取網上找圖片素材，但是呢，找到的圖片素材都在一張圖片上，就比如說圖標，圖片如下：
圖標合集
如果讓你只取其中一個圖標，你是否在想用軟件分割呢，其實并不用，css就可以實現只取其中之一并且不需要裁剪，步驟如下：
第一步：量出圖標大小以及圖標左上角位置
這里我們取第一行第二個圖標顯示，圖標大小37X38，左上角位置為：82X22
第二步：設置顯示div的大小為圖標大小
<html>
<body>
<style> .show{ width:37px; height:38px; } </style>
<div class="show"></div>
</body>
</html>
第三步：設置div的背景圖片為圖標素材，并且顯示圖片素材中第二個圖標的位置
<html>
<body>
<style>
.show{ background:transparent url(/images/2.png) no-repeat scroll -82px -22px ; width:37px; height:38px; }
</style>
<div class="show"></div>
</body>
</html>
顯示如下：
是不是很神奇，其實主要靠的是其中
background:transparent url(/images/2.png) no-repeat scroll -82px -22px ;
其中
background:transparent表示div背景透明，然后
url(/images/2.png)表示設置div的背景為圖標素材圖片
no-repeat 表示圖片不重復
scroll -82px -22px 表示背景圖片左邊移動82個像素，向上移動22個像素，也就是說從x：82px y:22px開始顯示圖片
然而div只有一個圖標的大小，所以顯示出來的就只有一個圖標大小，其余部分均為不可見。
如此就實現了CSS讓圖片只顯示一部分，也就相當于摳圖的功能。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
