Ⅰ web前端怎麼去掉圖片的點和縫隙
方法一： img: display: block;
方法二： 圖片的父元素設置 font-size: 0;
Ⅱ Web前端工程師應該學會的切圖技能！
今天小編要跟大家分享的文章是關於Web前端工程師應該學會的切圖技能。相對於程序來說，切圖門檻很低，只要有一些ps基礎，摸索個五分鍾基本也就了解各大概。但是就跟其他的所有技能一樣，切圖也是有很多技巧性和經驗在裡面的，這些東西可以讓你的切圖工作更有效率，更有目的性。這篇文章就是幫助大家整理歸納一下web前端需要學習的分圖技巧，希望可以幫到各位前端朋友們，下面我們一起來看一看吧！
說明：筆者用photoshopcs5做示例，不同版本功能會有稍許差異。
第一部分：一些快捷鍵
相對於設計和繪畫，切圖用到的ps並不多，以下我總結一些在切圖中比較常用的快捷鍵，這些快捷鍵能答復的提高你的工作效率，並且看起來很酷。
自由的控制視圖系列
§自由的瀏覽圖片：按住空格後，滑鼠拖動
§自由的縮放圖片：按住alt+滾輪
§切換到實際像素(100%)：Ctrl+1
§工作區類型切換：Tab
控制內容系列
§通過畫面上點選一個圖層：Alt+滑鼠右鍵
§在畫面上拖動一個圖層：V切換到移動模式滑鼠拖動
§復制拖動一個圖層：移動模式下Alt+拖動
§刪除一個圖層：選中要刪除的圖層按下Delete
§合並多個圖層：選中要合並的圖層按下Ctrl+E
§選區內填充顏色：Alt+Delete(前景色)Ctrl+Delete(背景色)
§縮放當前選擇圖層：Ctrl+T(自由變換模式)
實用工具系列
§畫一個選區：點擊M進入選區模式，滑鼠拖畫
§放棄選區：Ctrl+D
§吸管工具：點擊I進入吸管模式，點選畫面顏色
§文字工具：點擊T進入文字模式，點選畫面的文字或者創建新文本
§切片工具：點擊C進入切片模式(舊版本會有不同)
第二部分：一些實用技巧注意PS所處的狀態
photoshop開啟一個文件，軟體本身就處於不同的狀態之中，總結下來有這樣幾種
工具狀態--代表當前是出於移動模式，選區模式，切片模式或者是吸管模式等等，工具狀態代表你當前對文檔操作的類型。
有一些特殊的狀態下，要求你必須做出選擇，這時候狀態的切換會暫停。比如，文字輸入模式和自由縮放模式下，你必須先對當前所做修改做出確認，才可以進行下面的操作。這種情況的特點是狀態欄會出現如下選擇，如需快速放棄修改可點擊ESC
圖層狀態--代表你當前操作的對象，有一些對象只接受特殊類型的操作。
比如一些填充和繪制的功能無法在文字圖層進行，圖層組不能進行操作。總之，你在進行塗層修改操作的時候，一定要注意當前操作的對象，否則容易造成誤操作和操作不能
色彩索引模式--這是一個常見錯誤，通過導出web格式圖片出來的png會自動換成索引模式，如果要繼續修改需要把索引模式轉成RGB模式
操作圖層
如果不是設計者自己來切圖，那麼切圖者需要從圖層里來體會設計者的意圖。如何分組，層次間的關系都體會了設計者對頁面結構個人的理解。所以對一個設計稿來說，第一步是粗看圖層，理解設計意圖，其次是根據自己的理解對圖層進行新的操作和轉換。以下是關於圖層操作的一些經驗：
§關閉圖層可見性--關閉圖層可見性非常常用，因為有些頁面元素是交織在一起的，你通常需要關閉其中某項先切一部分，再切一部分。
§合並圖層--設計師載入第三方的元素這類的作法，會讓頁面某些小部件的圖層結構異常復雜，這時候將整個組合並Ctrl+E不失為一個好辦法
§
合並圖層的時候需要注意的是圖層效果會跟隨合並，這一方面會帶來不好修改的問題，所以合並完了通常Ctrl+Alt+Z還原,另一方面在某些時候還是很有用的，但個圖層的效果跟空圖層合並也會起到圖層柵格化的效果(文字圖層也可以跟空圖層合並)。
§復制圖層--有些時候一些sprite效果可以直接通過復制圖層在原稿上列出來，再通過切片工具出圖
§圖層蓋章--在一些圖層特別復雜的頁面，有時需要用到圖層蓋章工具，選中最頂層的圖層，點擊Ctrl+Alt+Shift+E
可以把以下的所有圖層蓋到一個新的圖層上。這個操作的好處是可以在不影響圖層本身的情況下，合並圖層。
生成圖片
1)圖片格式--圖片格式的原則簡單來說是架構復雜，色彩眾多的圖片jpg優先，色彩簡單，需求透明的png優先。png24在IE6下不兼容。
2)切片工具--
切片工具是ps為切圖提供的強大的批量的工具，所以一定要盡可能的使用它。使用切片之前先採用上述的方法對圖層進行處理，然後按需劃取需要的切片區域，使用切片工具的時候有如下幾個小技巧：
§切片選項--
劃取完分區以後，要對切片進行一些設定是很重要的，切片工具下Alt+點擊切片，會彈出如下窗口。首先，可以檢查切片的尺寸和位置，尤其是尺寸，比如你要切的按鈕定寬高，這里的檢查和設置就至關重要。其次，在這里直接命名，可以省去出圖以後重命名的時間。
§切片儲存--切片在儲存的時候，可以點選每個切片對其設定不同的圖片格式，保存的時候可以選擇保存選擇的切片而不是全部。
3)全新圖片--很多時候，切片難以直接使用，圖片需要進行二次處理。這時候我認為有以下幾點需要注意：
§千萬不要對jpg進行二次處理：jpg就算質量100%也是有損格式，二次處理的jpg會有肉眼可見的質量損失，所以要採用png的各種作為中轉。
§
注意圖片尺寸：有些版本的ps在拖拽進文檔的時候會默認尺寸適應，這會導致圖片尺寸在你不知情的情況下發生改變。解決的辦法可以是優先創建尺寸正確的圖片，或者以源文檔圖層的形式拖拽進新文檔。
§縮放：任何格式的圖片縮放都會產生質量損失，盡可能採用矢量圖縮放，或者在源文件的路徑里縮放再拖拽。
4)新圖片處理--新圖片的處理有以下幾個常用的技巧：
§圖像裁切和顯示全部：圖片小於畫布或者圖片大於畫布的情況下使用裁切和顯示全部命令，可以保證圖片的精確性。命令位於圖像(I)->
裁切/顯示全部
§活動選區，復制，粘貼：這三個命令配合使用可以實現很多轉換。比如一個漸變按鈕的縮短擴大。
結語
本來是想寫一個切圖的十分鍾入門教程，發現寫著寫著有點跑題，越來越細致。本文是我自己切圖的心得，而切圖技巧也因人而異，也需要各位自己去發現總結自己的技巧。另外一方面，我想切圖的重點也許並不在其本身，而在切圖者知道要怎麼切，熟悉web頁面構建的原理，同時根據自己的需要切出不同的效果。
以上就是小編今天為大家分享的關於Web前端工程師應該學會的切圖技能的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。想要了解更多web前端相關知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利。
Ⅲ 前端開發技術。怎麼把圖片放到同一個目錄下
打開文件管理，進入內部存儲，點擊搜索圖標，搜索jpg，長按照片後選擇要放在一個文件夾的照片，點擊移動、內部存儲、新建文件夾，輸入名稱後點擊確定，打開文件夾後輕點移動即可。
系統目錄指的是操作系統的主要文件存放的目錄，目錄中的文件直接影響到系統是否正常工作。
所謂系統目錄就是指操作系統的主要文件存放的目錄，目錄中的文件直接影響到系統是否正常工作，了解這些目錄的功能，對使用系統會有很大的幫助。
Ⅳ css中如何設置兩個圖片之間的距離
1、css設置圖片距離可以用盒子模型的margin屬性。操作方法首先用html編輯器新建一個html文件，裡面放入幾張圖片：
Ⅳ PS-前端切圖教程（切jpg圖和切png圖）
轉發自： PS-前端切圖教程（切jpg圖和切png圖） - xing.org1^ - 博客園 (cnblogs.com)
———————-------------------------------------------------------------------- PS切圖步驟說明 ————————————————————————————————
一共分兩大項：切jpg圖、切png圖。
我用的是PS CC 版本，教程中用到的除了界面和擺放位置不一樣外，其他應該和低版本的都一樣了。
一、 切JPG圖
1．打開ps導入圖片的步驟是鐵定的了
2．選擇左邊工具欄里的「切片工具」
事先自己沒用過或上一次ps工具使用時沒有使用過「切片工具」的，打開ps工具欄里默認是「裁剪工具」的圖標
你可以滑鼠左鍵點住「裁剪工具」不鬆手，他會在右邊展開（我這是工具欄在ps界面左側的情況下）這一組的所有工具，在里邊選擇「切片工具」即可
我圖中之所以框選了兩個工具，是因為後期還要用到「切片選擇工具」，這里先認識一下他的位置在哪。
3．用「切片工具」切出想要的范圍，框選范圍就像平時用qq的截圖工具一樣。
如下，我需要這個小圖標，我就框選了他。
框選中：
框選後：
如果你框選好了松開了滑鼠，他還是這種黃色的邊線，你把「切片工具」移到附近，他還能調整框的大小范圍。
但是如果你框選了好幾個了，想改前邊已經框選好的：
像如上這樣，要知道，ps切片工具最近一個選區的切片是用黃色框包裹的，其他前邊切得都是藍色邊線，這時候你再用「切片工具」去調整藍色邊線的選區是動不了的。
這就要用上「切片選擇工具」了
4．「切片選擇工具」調整范圍：
切片選擇工具就在「切片工具」的下邊，尋找方法見上解。點擊選擇要調整的切片藍線，待其變成黃色後，調整范圍。
切片選擇工具只能選擇並調節范圍，不能切片。
5．切好後保存
保存方法：文件——存儲為web所用格式【快捷鍵ctrl+shift+alt+s】
在彈出的【存儲為web所用格式】對話框中，下拉選擇框選擇JPEG格式
按需求更改質量（低、中、高、非常高、最佳。這五個模式）
點擊存儲後彈出【將優化結果存儲為】的對話框
選擇存放位置、設置文件信息——
一般存儲時，ps會自動建立一個images文件夾，你要找到剛才自己設定的位置中，找images文件夾，在她里邊才有你剛才切好的圖。
命名文件名
「格式「——僅限圖像
在「切片」那裡，可以選擇是存儲全部切片還是只存儲選中的切片，
一般默認就存儲全部切片就好了，有時候只需要一小塊切片時，可以選擇存儲選中的切片，他會只保存一張你當前切得圖，這樣省的自己去一大堆切片中撿出來自己要用的了。
二、 切PNG圖
切透明圖的核心理念是，你要把不需要的背景圖給隱藏掉，只讓需要的留下來，底部背景變成像馬賽克那樣的樣式。
1．打開ps拖進來你要切的psd或者tif文件，
一定得是帶圖層的。
2．先選擇移動工具
3．並在頂部選項欄里勾選自動選擇，
4．下拉框里選擇圖層
若沒有選項欄或者圖層欄的：
在菜單欄點擊窗口——選項。打了對勾後就能調出工具對應的選項面板了。
5．然後用「移動工具」點擊你不需要的背景圖，ps會自動選中該背景所在的圖層，
6．你在圖層面板中，把對應這層的左邊小眼睛關掉就好了，讓背景圖先隱藏起來。
有時候設計會有好幾層，他為了光效或者其他效果做了好幾層不同透明度的背景疊加在你要切的東西後邊，
你就用移動工具（快捷鍵v【英文輸入法下按v就可以鎖定移動工具】）點擊它然後關掉它，有幾層就多做幾步，直到你不需要的背景全部隱藏掉。
但是良心的設計一般會把背景都放到一個圖層中，你找到一層背景，所有的都和他在一個組里邊，你把組的小眼睛關掉即可
7．然後切片工具切出你要的那個圖標
8．保存：文件-存儲為web所用格式(ctrl+shift+alt+s)
9．選擇png-8/png-24格式，看你對圖標的要求了
PNG8」是指8位索引色點陣圖，「PNG24」是24位索引色點陣圖；
png8：
每一張「png8」圖像，都最多隻能展示256種顏色，所以「png8」格式更適合那些顏色比較單一的圖像，
例如純色、logo、圖標等；因為顏色數量少，所以圖片的體積也會更小；
png24：
每一張「png24」圖像，可展示的顏色就遠遠多於「png8」了，最多可展示的顏色數量多大1600萬；
所以「png24」所展示的圖片顏色會更豐富，圖片的清晰度也會更好，圖片質量更高，當然圖片的大小也會相應增加，
所以「png24」的圖片比較適合像攝影作品之類顏色比較豐富的圖片；
這是二者的區別，根據自己的需求選擇吧。
10．然後就是一定要勾選透明度，其他默認設置就好。
Png-8的透明度位置
Png-24的透明度位置
11．」保存全部切片「或者「保存選中切片」
這里還要說明一個問題，有時候一個頁面中，我用切片工具選出好幾張png圖標准備切，然後保存的時候也選擇png格式都沒問題，
但是到了選擇保存位置這個對話框里，選擇的是「保存所有切片「，
最後保存出來的圖片，只有最後切得那張或者說切片工具選中的那張是png的，其他就都存成jpg格式了，背景是白色底
！！所以切png的圖，還是建議，一張一張「保存選中切片」比較好。
或者你的圖標與白色底差別大的話，你也可以不計較，讓他保存成jpg後再去ps中魔棒摳圖也好，不過這樣比較麻煩不是。
有的說，背景圖和圖標每分圖層咋辦？那咋辦？找設計吧。要不你自己選取工具扣吧，扣好了另存為png也是一種辦法
三、 其他技巧 ：
1．Ctrl+ +號放大圖片，
2．ctrl-縮小
3．按住空格，滑鼠圖標變成抓手工具，移動頁面
四、重磅彩蛋！！！還有一個吊炸天的方法——針對單一小icon切成png的
「移動工具」點擊圖標，選中圖標所在的圖層；
右擊該圖層，選擇「轉換為智能對象」；（ps這時候沒反應，不要大驚小怪，是你看不到而已）
接著再次在這個圖層上，右擊——「編輯內容」
對話框點擊確定
ps就自動生成一個新的文件，只有那個icon，而且是透明的哦！
很神奇有么有！
很省力有么有！
1秒搞定有沒有！
以下是圖解：
這是點擊一個小圖標
選中圖標後的圖層面板
右鍵點擊該圖層選擇「轉換為智能對象」
沒轉換前的圖層樣式：
轉換後的圖層樣式：
所以別說「我轉換了ps沒反應」這樣的話了，是有的，你不仔細看看不到
接著再右擊——「編輯內容」
點擊「確定」
看，他就新建了一個「形狀8」的頁面，放的是我的png的小圖標，
最後你保存為png也好，「存儲為web所有格式」也好，自由發揮吧。
這個方法可能只能保存一個圖標，
有的人說我好幾個圖：例如文字+圖片都有咋弄？
那就切圖唄！
那還要糾結的話那就合並圖層吧！
Ⅵ 類似於這樣的圖片展示，前端是如何做的，只截取圖片的中間部分
我不知道自己理解對沒？只是屏幕上的截屏？
窗口調整合適大小，QQ隨意打開一個對話框，用截屏按鈕。或者電腦右上角PrtSc按鈕全屏復制，打開windows附件自帶的畫圖板，粘貼，即可得到圖片，編輯之。
Ⅶ html中怎麼調整添加的圖片與文本之間的距離
html調整添加的圖片與文本之間的距離方法：
Ⅷ 前端圖片處理
我的理解應該是生成圖片的時候，在不影響圖片質量的情況下，盡量用體積小的格式，比如在不透明的情況下盡量把圖片保存成png格式。
在css中有一種技術叫做圖片精靈，就是把一些背景圖做成集合的形式。圖片只需載入一次。
最後網上好像是有插件（瀏覽器也有插件）可以對圖片進行壓縮處理。
Ⅸ html前端切圖，求教
你這個要分開圖層，
然後就可以切了
希望幫到你（前端屋）
Ⅹ html中豎線分隔符怎麼設定
你好！html里是沒有自帶的中豎線分隔符，但是你可以用div+CSS製作出一個，也就是用邊框線來拉一個出來，寬高度由你自己定。參考如下：
<div style="height:100px; width:1px; border-left:1px #000 solid"></div>
希望我這樣的回答能幫到你。