react 有把图片转化成九宫格拼图的插件吗？

cute_girl

1.5k21228320

发布于
2019-04-17

求推荐，各大网站都找不到，自己水平有限也不会写，谢谢大家

react javascript

阅读 3.1k

3 个回答

得票最新

yzllee

2.9k1324

发布于
2019-04-17

实现思路：
九个相同宽高div组成九宫格图形，每个div的background-image: url("xxx")一样，然后用background-position: 0px 100px这个属性控制图片的展示，实现九宫格的样子。

Fractal

5.5k22433

发布于
2019-04-17

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nine Cell</title>
    <style type="text/css">
    .box {position:relative;width:300px;height:300px;background:url("https://image-static.segmentfault.com/268/114/2681140722-5cb6ed055fb93_articlex") center center/contain no-repeat;}
    .box .mask {position:absolute;top:0;left:0;width:100%;height:100%;
        background:linear-gradient(to right, transparent 0, transparent 90px, #FFF 91px, #FFF 105px) top left repeat, linear-gradient(to bottom, transparent 0, transparent 90px, #FFF 91px, #FFF 105px) top left repeat;
        background-size:105px 105px;
    }
    </style>
</head>
<body>
<div class="box">
    <div class="mask"></div>
</div>
</body>
</html>