用纯css实现一个图片拼接九宫格

<style>

body{

margin: 0;

padding: 0;

// 设定居中

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.container{

width: 300px;

height: 300px;

display: flex;

// 子盒子布局，要让子盒子之间有间隙就把宽高设大一些。

justify-content: space-between;

flex-wrap: wrap;

position: relative;

/* background-color: red; */

}

.item{

overflow: hidden;

box-shadow: inset 0 0 0 1px #FFF;

transition: 0.5s;

background-size: 300px 300px;

height: 100px;

width: 100px;

background-image: url(./image/m4.jpg);

}

// 选中每行盒子的第一个

.item:nth-child(3n + 1){

/* margin-left: -20px; */

background-position-x: 0;

}

.item:nth-child(3n + 2){

/* margin-left: 0; */

background-position-x: -100px;

}

.item:nth-child(3n + 3){

/* margin-left: 20px; */

background-position-x: -200px;

}

// 这里设置的样式是为了从给底下3个盒子设置位置，中间和上面的盒子位置设置把这里的覆盖掉

.item{

background-position-y: -200px;

}

.item:nth-child(-n + 6){

background-position-y: -100px;

}

.item:nth-child(-n + 3){

background-position-y: 0;

}

</style>

</head>

<body>

// 先设立九个子盒子和一个父盒子

</div>

</body>

</html>

用纯css实现一个图片拼接九宫格相关推荐

html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理在按钮中放置一个默认隐藏径向渐变的 ...
html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果（附源码）...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com ...
纯css实现一个族谱树
在做前端的时候,发现用到很多树的组件,但大多数的前端框架,都是左右树,并不是上下树,也就是族谱树. 那今天就给大家纯CSS实现一个族谱树. 先看看效果图: 参考代码: <!-- We will ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效
39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效原文地址:https://segmentfault.com/a/1190000015126240 HTML code: <div cl ...
html做微信logo,纯CSS实现一个微信logo，需要几个标签？_html/css_WEB-ITnose
博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的 html 标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用 ...
28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形
28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形原文地址:https://segmentfault.com/a/1190000014946883 感想:三个平面图形旋转 HTML代码: < ...
4. 纯 CSS 创作一个金属光泽 3D 按钮特效
4. 纯 CSS 创作一个金属光泽 3D 按钮特效原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class=&qu ...

用纯css实现一个图片拼接九宫格

用纯css实现一个图片拼接九宫格相关推荐

最新文章

热门文章