图片九宫格的CSS实现

前言

如何实现图片九宫格的效果,如下所示:

1. 具体实现

整体思路:使用一个div的img-container盒子,里面添加九个img-item的子盒子。通过给每个子盒子设置背景图片,通过使用 nth-child() 伪类选择器对特定位置的图片进行样式设置,从而控制每个img-item背景图片的background-position-xbackground-position-y 属性对背景图片进行水平和垂直方向的定位,实现了图片的拼接效果。

1.1 先给每一个img-item都设置背景图片

css 复制代码
.img-item {
    position: relative;
    box-shadow: inset 0 0 0 1px #fff;
    transition: 0.5s;
    background-size: 300px 300px;
    /* background-image: url(https://img1.baidu.com/it/u=3758374993,766184369&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=282); */
}

为了方便理解nth-child控制的效果,添加背景色理解x、y轴坐标的控制。

1.2 控制x坐标

控制第一列的x坐标:特点是x为0

css 复制代码
.img-item:nth-child(3n+1) {
    left: -20px;
    background-position-x: 0;
    background-color: blue;
}

控制第二列的x坐标:特点是x为-100,因为背景图需要向左偏移100

css 复制代码
.img-item:nth-child(3n+2) {
    left: 0px;
    background-position-x: -100px;
    background-color: pink;
}

控制第三列的x坐标:特点是x为-200,因为背景图需要向左偏移200

css 复制代码
.img-item:nth-child(3n) {
    left: 20px;
    background-position-x: -200px;
    background-color: red;
}

效果:

此时x轴的坐标确定,现在需要确定y的坐标。

1.3 控制y的坐标

y坐标确定,没有办法进行一行的控制,只能进行覆盖操作。具体的是通过img-item全选设置确定最后一行y坐标,.img-item:nth-child(-n+6)确定中间一行的y坐标,.img-item:nth-child(-n+3)确定第一行的y坐标。

确定第三行的y坐标:特点是y为-200,因为背景图需要向下偏移200

css 复制代码
.img-item {
    top: 20px;
    background-position-y: -200px;
    background-color: blue;
}

确定第二行的y坐标:特点是y为-100,因为背景图需要向下偏100

css 复制代码
.img-item:nth-child(-n+6) {
    top: 0;
    background-position-y: -100px;
    background-color: pink;
}

确定第一行的y坐标:特点是y为0,因为背景图不需要偏移

css 复制代码
.img-item:nth-child(-n+3) {
    top: -20px;
    background-position-y: 0;
    background-color: red;
}

效果:

最后添加hover效果:

css 复制代码
.img-container:hover .img-item {
    left: 0;
    top: 0;
    box-shadow: inset 0 0 0 0 #fff;
}

2. 总结

完整代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	body {
		height: 100vh;
		display: flex;
		align-items: center;
		background: #171717;
	}

	.img-container {
		margin: 0 auto;
		width: 300px;
		height: 300px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.img-item {
		position: relative;
		box-shadow: inset 0 0 0 1px #fff;
		transition: 0.5s;
		background-size: 300px 300px;
		background-image: url(https://img1.baidu.com/it/u=3758374993,766184369&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=282);
	}

	.img-item:nth-child(3n+1) {
		left: -20px;
		background-position-x: 0;
	}

	.img-item:nth-child(3n+2) {
		left: 0px;
		background-position-x: -100px;
	}

	.img-item:nth-child(3n) {
		left: 20px;
		background-position-x: -200px;
	}


	.img-item {
		top: 20px;
		background-position-y: -200px;
	}

	.img-item:nth-child(-n+6) {
		top: 0;
		background-position-y: -100px;
	}

	.img-item:nth-child(-n+3) {
		top: -20px;
		background-position-y: 0;
	}

	.img-item {
		top: 20px;
		background-position-y: -200px;
	}

	.img-container:hover .img-item {
		left: 0;
		top: 0;
		box-shadow: inset 0 0 0 0 #fff;
	}
</style>

<body>
    <div class="img-container">
        <div class="img-item"></div>
        <div class="img-item"></div>
        <div class="img-item"></div>
        <div class="img-item"></div>
        <div class="img-item"></div>
        <div class="img-item"></div>
        <div class="img-item"></div>
        <div class="img-item"></div>
        <div class="img-item"></div>
    </div>
</body>

</html>

就是巧妙通过nth-child确认背景图的x、y的偏移,从而达到拼接的效果。单纯记录下,如果错误,请指正O^O!

相关推荐
汪敏wangmin1 分钟前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦42 分钟前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆1 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆1 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding1 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆1 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
angen20181 小时前
Ruby如何采集直播数据源地址
前端·chrome
goldenocean2 小时前
React之旅-05 List Key
前端·javascript·react.js
亮学长2 小时前
lodash不支持 Tree Shaking 而 lodash-es可以
大数据·前端·elasticsearch