神奇的background——绘制图形

jollywing 发布于2019-08-29 16:55 / 2753人阅读

摘要：还可能有需要切一整张超大图的情况。作为一个优秀的前端，本着自己动手丰衣足食的理念，下面给大家介绍用来绘制这些特的图片。原理其实就是通过绘制每个图形设置位置和大小，最后就能得到想要图像。

相信大家在平时工作中少不了会被要求在某些元添加一些特殊的背景图片，这时候通常就拿起ps就是切切切。不说这种方式麻烦，有ui给你切好的情况已经不错，没有的就有自己动手。还可能有需要切一整张超大图的情况。作为一个“优秀”的前端，本着自己动手丰衣足食的理念，下面给大家介绍用background来绘制这些特的图片。

先来看看平时会出现的

遇上这种情况，通常处理就是切得下面的图片

再通过一下css得到

当然现在不切图，直接用css来做

.box{
    width: 500px;
    height: 500px;
    background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
                linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 0,
                linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 50px,
                linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 100px 50px;
    background-size: 100px 100px;
    background-color: #fff;
}

我们可以看到会得到与切图一模一样的效果

接下来来看下上面的css为什么这样写
首先我们先理解background: linear-gradient()，在background中CSS3 渐变（gradients）可看做一张背景图片，可理解为background: url()，而背景图片的可以为多张的，对应我们就可以写多个linear-gradient，通过对其颜色的控制来拼接成一个独立的图片块。background-size刷新中可通过逗号分隔，会循环设置对应的linear-gradient。
这里需要注意的是，linear-gradient是重后往前绘制的，就是说前面颜色的会覆盖后面的颜色。

分析上面的格子背景，我看可以看做在一个4x4的格子中有两个1x1的灰格子覆盖在上面。每个灰格子可通过
的基础图案拼成，所以有了如下

background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
            linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 50px;

这里有个问题，小三角间拼接有缝隙，所以用
图形再拼接一次。

background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
            linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 50px,
            linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 0,
            linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 100px 50px;

最后我们就能得到和上面一样的格子背景。
更多例子

有时候我们需要的背景可能不需要repeat，且图形没有规律
如：

这时我们就要对图形的每个角进行分别设置。

.box{
    width: 500px;
    height: 500px;
    background: linear-gradient(black, black) left top,
                linear-gradient(black, black) left top,
                linear-gradient(black, black) right top,
                linear-gradient(black, black) right top,
                linear-gradient(black, black) right bottom,
                linear-gradient(black, black) right bottom,
                linear-gradient(black, black) left bottom,
                linear-gradient(black, black) left bottom;
    background-repeat: no-repeat;
    background-size: 4px 20px, 20px 4px;

原理其实就是通过linear-gradient绘制每个图形设置位置和大小，最后就能得到想要图像。

以后当我们遇上一些特殊的背景图后就能通过css来实现它呢。

GPU云服务器云服务器图形绘制 Android绘制图形 html绘制图形代码 html绘制图形排列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113988.html

神奇的background——绘制图形

摘要：还可能有需要切一整张超大图的情况。作为一个优秀的前端，本着自己动手丰衣足食的理念，下面给大家介绍用来绘制这些特的图片。原理其实就是通过绘制每个图形设置位置和大小，最后就能得到想要图像。相信大家在平时工作中少不了会被要求在某些元添加一些特殊的背景图片，这时候通常就拿起ps就是切切切。不说这种方式麻烦，有ui给你切好的情况已经不错，没有的就有自己动手。还可能有需要切一整张超大图的情况。作...

tainzhi 2019-08-02 11:41 评论0 收藏0
学习 canvas 的 globalCompositeOperation 做出的神奇效果

摘要：主要的不同是，刮刮卡效果最后需要自动擦除掉全部灰色，这里有两种方式。第二种方式，虽然不存在跨域的问题，但是，不能很好的根据刮刮卡上灰色的面积，控制最后擦除全部灰色的时机。说明最早知道 canvas 的 globalCompositeOperation 属性，是在需要实现一个刮刮卡效果的时候，当时也就是网上找到刮刮卡的效果赶紧完成任务就完了，这次又学习一次，希望能加深理解吧。先来看...

UnixAgain 2019-08-26 17:49 评论0 收藏0
页面动画知识点整理

摘要：然后在节点上设置了动画属性，并将其设为前面定义的动画，每一次动画秒，表示无限循环，表示缓动方式，两个关键帧之间的变化是方式逐步变化的。平时工作中会遇到需要实现一些存在动画的页面。这里对动画的实现知识做一个整理。页面动画的实现可以分为两类：CSS动画、Canvas动画、JavaScript动画。JavaScript动画没啥好讲的，这里就不整理了。 CSS动画 CSS3中提供了一个属性t...

booster 2019-08-19 18:30 评论0 收藏0
用 CSS 实现三角形与平行四边形

摘要：所以我们需要加一个内层元素，并对内层元素做一次逆向的歪曲，从而得到我们想要的效果实现代码如下，另附示例上海总结第一种方法使用属性出三角形，并通过对三个元素进行拼接最终实现了平行四边形而第二种方法则通过来得到平行四边形。本文最初发布于我的个人博客：咀嚼之味最近在逛某个技术网站的时候，感觉文章关键词上的样式好酷炫啊。于是我将那种写法照搬到了我的博客中，也许最近逛过我博客的小伙伴已经发现...

Martin91 2019-08-28 18:14 评论0 收藏0