這幾個做海報的免費素材網站，新手快來收藏

高雙手！！！

作為一個在線設計平臺，稿定設計實名自薦！

另外，稿叔也從俺家設計師們手上要來了超多高逼格素材網站，希望能幫到你們！

話不多說，先上個匯總圖：

一、PNG素材類

1、FreePNGs——海量免費PNG素材資源

FreePNGs有超過17w張免費的 PNG 透明圖片可供下載，所有的圖像的都是可免費下載使用的。

圖片分類豐富多樣，在這里你可以輕松找到你喜歡的人物、植物、建筑、交通工具等PNG圖片資源，是一個值得你收藏的 PNG 海量圖庫網站。

P.S.可供個人自由使用，但是商業用途可能需要注意

2、Pngtree——免費PNG圖片資源平臺

Pngtree提供數百萬個PNG圖形資源可供所有人免費下載，專業設計師都在用的圖片資源平臺！

它擁有豐富的免版稅 PNG 圖像、矢量圖、背景圖、模板、文本效果等圖形資源，只要注冊就可以獲得每天 2 次免費下載的機會。

3、pngimg——海量 PNG 免摳圖素材庫

PngImg 是一個非營利性的 PNG 透明背景圖片素材庫，該網站提供了海量的高質量 PNG 圖片，專門為設計師搜索和分享優質的無背景圖和剪貼畫，用戶無需注冊即可免費下載使用！

4、Cleanpng——數百萬張PNG透明圖片素材資源庫

傳送門：https://www.cleanpng.com/

Cleanpng里擁有超過三百萬張 PNG 透明圖片素材，且每張PNG 圖片質量都很高，如果你正在尋找最大最全的PNG 圖片資源，Cleanpng絕對不容錯過！

這里的所有PNG 圖都可以免費下載，下載數量不受限制，并且不需要注冊登錄就能直接下載！

二、圖片靈感素材類

5、Gratisography——高質量攝影圖片集散地

Gratisography是一個提供免費高品質攝影圖片的集散地，優勢在于所有的圖片都可以用于個人用途或商業用途！

每周都會更新免費高清圖片資源，在這里有很多時尚流行的照片，只需點擊即可快速下載為你所用~

6、Unsplash——無版權高清圖片資源庫

Unsplash也是一款非常值得推薦和受歡迎的高清圖片庫，同樣擁有免費、無版權的圖片資源，全都是由全世界的攝影師提供的精美照片供設計師下載、獲取靈感。

它的優勢在于圖片分類廣，幾十種分類可以滿足各種圖片需求。

7、FOCA Stock——國外小眾免費素材圖庫

FOCAStock是一個由熱愛攝影的小伙伴創建的免費圖庫網，照片風格十分貼近我們的生活。

這里不止提供海量照片素材，還有視頻模板可供你下載，網站的照片分類十分齊全，包含了特色的照片自然、城市、日落、食物、風景、城市場景，工作空間等分類，找到符合我們需求的圖片，不用注冊帳號就能直接下載！

8、稿定設計——在線設計神器&在線素材庫

對于沒有設計基礎或不會PS的菜鳥同學來說，稿定設計簡直太好用了！

涵蓋了新媒體配圖、電商、生活娛樂、辦公商務等上百種場景，20W+原創版權素材模板，

光是海報就有手機海報、動態海報、長圖海報、電商橫版海報、廣告banner、全屏海報、張貼海報、營銷海報......超多不同類型的模板可供你挑選！

簡單拖拉拽，替換圖文內容就能在線生成精美圖片，可以解決你生活工作所有作圖需求！

除此之外，稿定設計還是專門的設計素材庫，點擊左側工具欄的“設計素材”，就能進入稿定素材站：

海量圖區：優質圖片全球合作，版權來源清晰可溯，全類型覆蓋您的作圖需要。

平面模板：品質模板源文件每日更新，圖層井然有序提高作圖效率從此不加班。

品質視頻：持續更新的視頻素材，緊隨熱點，助力視頻營銷，提升轉化效率。

高端免摳：高端原創免摳素材，源文件下載更靈活；本土化獨家設計，為設計賦能。

150W+正版圖片素材、8000W+圖片資源、200正版字體，就在稿定素材！

三、配色采集類

9、WebGradients——漸變色在線工具

在WebGradients你可以輕松調出漂亮的漸變色~

它提供180 個線性漸變的搭配方式，可以將其用作網站任何部分的內容背景。

亮點在于，它可輕松復制 CSS3 代碼，直接使用在作品中！并且免費提供給商業或個人使用，說一句設計師的色彩百寶箱也不為過！

10、Culrs——設計師必備優質調色板

Culrs是一個專業的設計師在線調色板，免費提供豐富的設計配色方案。有了它你不用再費腦筋尋找合適的顏色組合，輕松得到專業的設計用色！

同時Culrs還提供超人性化配色分類，可以說是設計師配色必備收藏調色板！

11、ColorLeap——復古配色方案在線工具

ColorLeap有個別名叫色彩時光機，它可以查詢每個年代輝煌的的流行配色

最早從公元前 2000 年開始一直到現代，都有相關的作品色彩記錄

可以幫助設計師獲取靈感，讓設計師盡情感受色彩的靈魂

四、icon圖標類

12、Iconfinder——免費圖標網站

Iconfinder是一款超實用的免費圖標網站，為用戶提供海量免費圖標+矢量素材，在這里可以輕松找到各種設計配色的圖案。

對于設計師而言是一款非常值得收藏的免費資源網站！

13、IconBlender——免費網頁 SVG 圖標素材庫

如果你在為找到的圖標素材過大而煩惱，可以試試IconBlender！這里提供了 80000 多個免費開源的圖標資源可供你下載使用，也可以直接復制到網頁代碼使用。

使用過程可以選擇圖標大小和粗細，圖標顏色，以及圖標類型，簡直太友好了！

14、iconfont——阿里巴巴矢量圖標庫

阿里巴巴旗下國內功能最為強大且圖標內容很豐富的矢量圖標庫之一，為用戶提供矢量圖標下載、在線存儲、格式轉換等功能。

支持AI/SVG/PNG/代碼格式下載，并且支持按路徑在線編輯icon顏色，設計師人手必備的圖標網站！

五、插圖插畫類

15、Skribbl——創意手繪插圖插畫站

手繪插圖是設計師管用的設計方式之一，如果你喜歡手繪插圖，或是想要分享自己的有意思的手繪作品，那么Skribbl就是一個不錯的選擇！

這里提供了來自全球優秀設計師分享的免費手繪插圖，都是一些簡單的手繪插畫，但帶來的視覺沖擊力一點也不弱，想要獲取到免費的插圖資源，可以訂閱，之后就能發送到你的郵箱！

16、50 Watts——插圖插畫視覺藝術站

50 Watts收集了來至世界各地怪異和讓人驚訝的視覺圖形，你看到的每一個素材，都能讓你記憶猶新。

這些創新是十足的設計手法，可以激發你的創作靈感。

17、Soazi Good——日本風格插圖插畫素材站

與其他插畫素材站不同，Soazi Good是一個非常精致可愛的插圖素材網站，小小的配飾非常有創意！

提供了背景類、各種主題的小插圖，甚至是動態圖，可以下載的格式有很多，比如 JPG、PNG、AI，部份圖文件也有提供 EPS 或 PSD 格式下載~

先匯總這么多，感興趣的小伙伴可以關注一波，之后還會再來更新！

常工作學習中總是需要一些素材圖片，今天和大家分享3個免費好用的圖片素材資源網站，總有一些素材能夠派上大用場的！

Pinclipart

https://www.pinclipart.com/

在搜索框輸入想要查找的圖片名稱或關鍵詞即可。每個搜索結果都有對應的分辨率。

點擊圖片進入，還會看到圖片的大小及格式，點擊“View Clipart”就可以免費下載了。

這個網站不僅素材多，而且還有個優點是圖片背景都是白底的，下載下來就可以馬上使用，無需再做背景處理。大家可以根據自己的實際需求以及網站顯示的圖片信息選擇性篩選使用。

Pixy

https://pixy.org/

在搜索框輸入想要查找的圖片名稱或關鍵詞即可。有多個免費的圖片資源可供下載，選擇的空間還是挺大的。

圖片清晰度大部分還是很不錯的，點擊“FREE DOWNLOAD”進行免費下載。

Motifolio

https://www.motifolio.com/sampleslides.html

這個網站里的素材比較偏醫學、生物類的，專業性相對會強一些，如果有這類學科素材需求的，那么這個網站還是不錯的。

以上網站都是英文網站，大家可以用谷歌瀏覽器自帶的翻譯功能，轉換成中文閱讀起來so easy！

作者：極客小俊」
「把邏輯思維轉變為代碼的技術博主」

咱們廢話不多說直接上代碼案例素材!

準備工作

首先準備圖片素材放入到你的demo案例下的img文件夾

當然圖片你也可以用其他類似的圖來代替也是可以的!

如圖

HTML代碼結構

 <div id="big">
            <div class="box">
                <div class="pic"><img src="img/bag.jpg" alt="" title=""/></div>
                <div class="mask">
                    <h2>三用小巧思波士頓包</h2>
                    <p>印花波士頓包 復古波士頓包，手提單肩斜挎多用，印花PVC</p>
                </div>
                <div class="title">
                    <h2 class="sl"><span></span>全場2折起 印花波士頓包 專柜終身保養</h2>
                    <h3 class="sl"><i></i><span>搶全場2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
                    <div class="price">
                        <div class="zx_pr"><span>￥</span>659</div>
                        <div class="xl_yp">
                            <p><del>￥1998.00</del><span>退貨賠運費</span></p>
                            <p><strong>70</strong>件已付款</p>
                        </div>
                        <div class="buy">搶!</div>
                    </div>
                </div>
            </div>
            <div class="box">
                 <div class="pic"><img src="img/bag3.jpg" alt="" title=""/></div>
                 <div class="mask">
                    <h2>豬年紀念款經典牛皮水桶包</h2>
                    <p>豬年紀念款 經典牛皮水桶包，自帶強大氣場</p>
                 </div>
                 <div class="title">
                    <h2 class="sl"><span></span>全場2折起 印花波士頓包 專柜終身保養</h2>
                    <h3 class="sl"><i></i><span>搶全場2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
                    <div class="price">
                        <div class="zx_pr"><span>￥</span>659</div>
                        <div class="xl_yp">
                            <p><del>￥1998.00</del><span>退貨賠運費</span></p>
                            <p><strong>70</strong>件已付款</p>
                        </div>
                       <div class="buy">搶!</div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="pic"><img src="img/bag4.jpg" alt="" title=""/></div>
                <div class="mask">
                    <h2>一包四用蜜蜂系列迷你小方包</h2>
                    <p>四用方盒包 一包四用蜜蜂系列迷你鏈條小方包</p>
                </div>
                <div class="title">
                    <h2 class="sl"><span></span>全場2折起 印花波士頓包 專柜終身保養</h2>
                    <h3 class="sl"><i></i><span>搶全場2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
                    <div class="price">
                        <div class="zx_pr"><span>￥</span>659</div>
                        <div class="xl_yp">
                            <p><del>￥1998.00</del><span>退貨賠運費</span></p>
                            <p><strong>70</strong>件已付款</p>
                            </div>
                        <div class="buy">搶!</div>
                    </div>
                </div>
            </div> 
        </div>

CSS代碼結構

*{
            padding:0px;
            margin:0px;
        }
        body{
            font-family: '微軟雅黑';
        }
        .sl{
            white-space: nowrap;
            word-break: keep-all;
            text-overflow: ellipsis;
        }
        #big{
            width:950px;
            height:416px;
            margin:10px auto;
            overflow: hidden;
        }
        #big>.box{
            width:298px;
            height:410px;
            float: left;
            position: relative;
            overflow: hidden;
            border:1px solid #ccc;
            margin-left:19px;
        }
        #big>.box:first-child{
            margin-left:0px;
        }
        #big>.box>.pic{
            width:298px;
            height:300px;
            overflow: hidden;
        }
        #big>.box>.pic>img{
            transition: all 500ms;
        }
        #big>.box:hover>.pic>img{
            transform: scale(1.5);
        }
        #big>.box>.mask{
            height:300px;
            width:298px;
            position: absolute;
            left:-298px;
            top:0px;
            background:rgba(0,0,0,0.3);
            transition: all 600ms;
            color:#fff;
        }
        #big>.box>.mask>h2{
            font-size: 18px;
            margin:80px 0px 10px 10px;
        }
        #big>.box>.mask>p{
            font-size: 12px;
            margin:0px 0px 10px 10px;
        }
        #big>.box:hover>.mask{
            left:0px;
        }
        #big>.box>.title>h2{
            margin:10px auto;
            width:288px;
            height:20px;
            line-height: 20px;
            font-size: 14px;
            color:#333;
            overflow: hidden;
            font-weight: normal;
        }
        #big>.box>.title>h2>span{
            display: inline-block;
            width:31px;
            height:16px;
            vertical-align: middle;
            background: url('img/tu.png') no-repeat;
            background-size:cover;
            margin-right:5px;
        }
        #big>.box>.title>h3{
            width:288px;
            height:20px;
            margin:0px auto;
            font-size: 12px;
            color:#666;
            font-weight: 400;
        }
        #big>.box>.title>h3>i{
            width:12px;
            height:16px;
            display: inline-block;
            background:url('img/tu1.jpg') no-repeat;
            vertical-align: middle;
        }
        #big>.box>.title>h3>span{
            color:#f00;
            margin:0 5px 0 5px;
        }
        #big>.box>.title>.price{
            width:298px;
            height:50px;
            background:#e61414;
        }
        #big>.box>.title>.price>.zx_pr>span{
            font-size: 20px;
        }
        #big>.box>.title>.price>.zx_pr{
            width:83px;
            height:50px;
            line-height: 50px;
            float: left;
            margin-left:2px;
            vertical-align: bottom;
            font-size:38px;
            color:#fff;
        }
        #big>.box>.title>.price>.buy{
            width:56px;
            height:50px;
            line-height: 50px;
            text-align: center;
            background:url('img/tu3.png') no-repeat;
            float:right;
            color:#f00;
        }
        #big>.box>.title>.price>.xl_yp{
            width:145px;
            height:41px;
            float: left;
            margin:4px 0 0 8px;
            font-size: 12px;
            color:#fff;
        }
        #big>.box>.title>.price>.xl_yp>p>span{
            margin-left:4px;
            width:72px;
            height:17px;
            display: inline-block;
            line-height: 17px;
            text-align: center;
            border-radius: 10px;
            background:#ffb369;
        }
        #big>.box>.title>.price>.xl_yp>p:nth-child(2){
            width:80px;
            height:20px;
            line-height: 20px;
            text-align: center;
            border-radius: 1px;
            margin-top:5px;
            background:rgba(0,0,0,0.2);
        }
        #big>.box>.title>.price>.xl_yp>p:nth-child(2)>strong{
            margin-right: 5px;
            font-size: 14px;
        }

最終效果

如圖

"點贊" "??評論" "收藏"

大家的支持就是我堅持創作下去的動力!?

?如果以上內容有任何錯誤或者不準確的地方，歡迎在下面留個言指出、或者你有更好的想法，歡迎一起交流學習???????????

在線咨詢

上一篇：html-超文本標記語言
下一篇：利用ChatGPT實現SEO自動化：適合初學者的教程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商