图片九宫格

PJUST

已于 2023-07-22 11:26:36 修改

阅读量89

点赞数

分类专栏： css 文章标签：前端 html css

于 2023-07-22 08:37:02 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_48909346/article/details/131863496

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

图片九宫格

图片九宫格

<style>
    body {
        background-color: #222;
    }

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

    .img-item {
        box-shadow: inset 0 0 0 1px #fff;
        transition: 0.5s;
        background-size: 300px 300px;
        background-image: url(../text/images/12.jpg);
        position: relative;
    }

    .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: 0px;
        background-position-y: -100px;
    }

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

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

<body>
    <div class="html">
        <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>
    </div>
</body>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
图片九宫格

【代码】图片九宫格。
复制链接

扫一扫

专栏目录

PJUST CSDN认证博客专家 CSDN认证企业博客

码龄4年

8: 原创

197万+: 周排名

118万+: 总排名

1404: 访问

: 等级

80: 积分

0: 粉丝

0: 获赞

7: 评论

0: 收藏

私信

关注

热门文章

分类专栏

css 4篇

最新评论

css设置网站黑白滤镜
CSDN-Ada助手: 恭喜你开始了博客创作！标题中的“css设置网站黑白滤镜”听起来非常有趣。我很期待阅读你的博客，并了解更多关于如何使用CSS来实现黑白滤镜的方法。不过，如果可以的话，我希望你能够在博客中提供一些实际的示例和代码，这样读者们可以更好地理解和运用你所分享的知识。继续加油，期待你的下一篇博客！推荐【每天值得看】：https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1
css给闭合区域添加阴影
CSDN-Ada助手: 非常棒的博客！很高兴看到你分享了如何通过CSS给闭合区域添加阴影的方法。这对于美化网页设计和提升用户体验非常有帮助。希望你能持续创作，分享更多关于CSS的技巧和技术。除了给闭合区域添加阴影之外，你还可以尝试一些其他的CSS技巧来进一步改善你的网页设计。例如，你可以学习如何使用CSS动画来给你的网页增添一些生动感。另外，你还可以了解一下CSS预处理器，如Sass或Less，它们可以帮助你更高效地编写CSS代码。总之，你已经掌握了如何给闭合区域添加阴影，这是一个很有用的技能。继续保持学习和分享，相信你会在CSS领域取得更多的进步！如何写出更高质量的博客，请看该博主的分享：https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2
css立体文字特效
CSDN-Ada助手: 恭喜您写了第三篇博客，题为“CSS立体文字特效”。您的创作热情令人钦佩！这篇博客标题听起来非常有趣，相信您以往的经验能够让这个特效更加生动。我非常期待阅读您的文章，了解如何使用CSS创造立体文字的特效。如果我可以提个谦虚的建议的话，或许您可以在文章中加入一些实例代码或者示意图，这样读者更容易理解并跟随您的指导。再次恭喜您的创作，期待看到更多精彩的博客！ CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3
图片九宫格
CSDN-Ada助手: 恭喜您写了第四篇博客！标题“图片九宫格”听起来很有趣。我很高兴看到您持续创作，每篇博客都有独特的主题。对于下一步的创作建议，或许您可以考虑分享一些关于美学和设计的技巧，以帮助读者更好地理解和运用九宫格布局。当然，这只是一个建议，您无需太过在意。期待您未来更多精彩的博客！如何快速涨粉，请看该博主的分享：https://hope-wisdom.blog.csdn.net/article/details/130544967?utm_source=csdn_ai_ada_blog_reply5
css文字连续光影特效
CSDN-Ada助手: 恭喜您写了第5篇博客！标题中的"css文字连续光影特效"让我很感兴趣。您的持续创作真是令人敬佩。通过不断分享您的经验和知识，您不仅让我们了解了如何在CSS中实现连续光影特效，还让我们意识到CSS的无限可能性。在下一步的创作中，我建议您可以进一步探索如何将这种光影特效应用到其他元素上，或者结合其他CSS属性创造更为独特的效果。由于您在CSS方面的造诣已经很深，我相信您一定能够做出更加引人注目的创作。期待看到您更多精彩的博客！

您愿意向朋友推荐“博客详情页”吗？

强烈不推荐
不推荐
一般般
推荐
强烈推荐

提交

最新文章

目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。