0

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

Toma77 1.3k
4 天前提问
3 个回答
1

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

0
<!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>
0

组件没用,有一个矩阵的效果,你可以自己尝试着写一写样式

矩阵效果

撰写答案

推广链接