这几个做海报的免费素材网站，新手快来收藏

高双手！！！

作为一个在线设计平台，稿定设计实名自荐！

另外，稿叔也从俺家设计师们手上要来了超多高逼格素材网站，希望能帮到你们！

话不多说，先上个汇总图：

一、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小时内与您取得联系。

整合营销服务商