神奇的background——绘制图形

2018-10-11 admin

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


先来看看平时会出现的

clipboard.png

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

clipboard.png

再通过一下css得到

<div class="box"></div>

<style>
  .box{
    width: 500px;
    height: 500px;
    background: url('imgurl');
    background-size: 20%;
  }
</style>

当然现在不切图,直接用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(),在backgroundCSS3 渐变(gradients)可看做一张背景图片,可理解为background: url(),而背景图片的可以为多张的,对应我们就可以写多个linear-gradient,通过对其颜色的控制来拼接成一个独立的图片块。background-size刷新中可通过逗号分隔,会循环设置对应的linear-gradient。 这里需要注意的是,linear-gradient是重后往前绘制的,就是说前面颜色的会覆盖后面的颜色。

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

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;

clipboard.png

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

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,且图形没有规律 如:

clipboard.png

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

.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来实现它呢。

原文链接:https://segmentfault.com/a/1190000016648449

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42423.html

文章标题:神奇的background——绘制图形

相关文章
Canvas 绘制粒子动画背景
效果如下: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...
2017-03-17
javascript+html5实现绘制圆环的方法
本文实例讲述了javascript+html5实现绘制圆环的方法。分享给大家供大家参考。具体如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; &lt;&#x...
2017-03-27
JS绘制生成花瓣效果的方法
本文实例讲述了JS绘制生成花瓣效果的方法。分享给大家供大家参考。具体如下: 这里使用JS绘制生成花瓣效果,纯JS生成的图形绘制效果,想研究一下JavaScript图形绘画方面知识的,不妨参考一下这个小程序,我觉得还是挺不错的。 运行效果如下...
2017-03-29
canvas绘制表盘时钟
话不多说,请看代码: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; ...
2017-02-21
canvas绘制环形进度条
效果如下: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...
2017-03-15
canvas绘制多边形
效果图: 代码如下: &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;content-type&quot; content=&quot;...
2017-03-15
canvas绘制的直线动画
话不多说,请看代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&gt;first ...
2017-02-21
JavaScript Canvas绘制圆形时钟效果
本文实例为大家分享了Canvas时钟效果展示的具体代码,供大家参考,具体内容如下 &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&q...
2017-03-17
canvas绘制七巧板
效果如下所示: 代码分享: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&...
2017-02-13
vue-threeJS数据驱动的三维图形可视化
数据驱动的三维图形可视化 在信息暴涨的2010-2016年间,冷暴力的扁平化确实有效降低用户的信息焦虑感,使有限的精力更高效处理过多的信息流。二维平面化扁平化在苹果等大头引领下,成为大众用户机器交流默认的语言。 然后,随着PC、平板、手机、...
2018-08-31
回到顶部