css 怎么设置图片为六边形

css设置图片为六边形的方法：首先创建一个HTML示例文件；然后在body中引入图片；最后通过“transform: rotate(120deg); overflow: hidden; ”等css样式实现图片为六边形即可。

本教程操作环境：windows7系统、HTML5& & CSS3版、Dell G3电脑。

CSS3 实现六边形Div图片展示效果

一. 效果图

二. 原理讲解

这个效果用到的主要知识点 ：

　　1. transform: rotate(120deg); 图片旋转

　　2. overflow: hidden; 超出隐藏

　　3. visibilITy: hidden; 也是隐藏，与 display:none; 相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置

　　我们要用到3层p进行旋转来得到这个效果（注: 3层 p 的大小是一样的）。最外层 p(boxF) 旋转120度，第二层 (boxS) 旋转-60度，第三层 (boxT) 再旋转-60度，此时刚好回正。我们的图片就放在第3层的 p 背景中。因为前两层 p 中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层 p 设置 visibility: hidden; 而第3层 p 是放图片的，需要显示出来，因此设置 visibility: visible; （注: 如果你不对第3层 p 设置 visibility: visible; 那它默认就会继承第二层 p(boxS) 的 visibility: hidden; ）。经过旋转肯定有超出的部分，因此对3个p都设置 overflow:hidden;

　　经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意，那就是p的宽高比例必须满足4：5，不然得到的就不是6边形了。在上面的效果图片中。我们在第三层 (boxT) 里面还放置了一个 p(overlay)，这个 p 是用于遮罩的，当鼠标移到6边形上时，会有遮罩效果。在 p(overlay) 里面有个a标签，里面是个 + 号，点击 a 标签则弹出层，显示大图（注: 这个 js 效果暂时没写）。

三. 上面效果图的DEMO代码【推荐：《css视频教程》】

!DOCTYPE html>
    html>
    head>
        meta http-equiv="Content-type" content="text/html;
     charset=utf-8" />
        title>
    CSS3 实现六边形图片展示效果/title>
        style type="text/css">
        body, p, img, ul, li        {
                margin: 0;
                padding: 0;
        }
        body        {
                font-Size: 12px;
                background-color: #DDD;
                min-width: 1200px;
        }
        ul, ul li        {
                list-style: none;
        }
        .clear        {
                clear: both;
        }
               .box        {
                position: relative;
                width: 630px;
                margin: 100px auto;
        }
        .lineF, .lineS        {
                position: absolute;
                visibility: hidden;
        }
        .lineS        {
                top: 182px;
                left: 105px;
        }
        .boxF, .boxS, .boxT, .overlay        {
                width: 200px;
                height: 250px;
                overflow: hidden;
        }
        .boxF, .boxS        {
                visibility: hidden;
        }
        .boxF        {
                transform: rotate(120deg);
                float: left;
                margin-left: 10px;
                -ms-transform: rotate(120deg);
                -moz-transform: rotate(120deg);
                -webkit-transform: rotate(120deg);
        }
        .boxS        {
                transform: rotate(-60deg);
                -ms-transform: rotate(-60deg);
                -moz-transform: rotate(-60deg);
                -webkit-transform: rotate(-60deg);
        }
        .boxT        {
                transform: rotate(-60deg);
                background: no-repeat 50% center;
                background-size: 125% auto;
                -ms-transform: rotate(-60deg);
                -moz-transform: rotate(-60deg);
                -webkit-transform: rotate(-60deg);
                visibility: visible;
        }
        .overlay        {
                transition: all 250ms ease-in-out 0s;
                display: none;
                position: relative;
        }
        .overlay:hover        {
                background-color: rgba(0,0,0,0.6);
        }
        .boxT:hover .overlay        {
                display: block;
        }
        .overlay a        {
                display: inline-block;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -16px 0 0 -16px;
                border-radius: 3px;
                background-color: #d3b850;
                text-align: center;
                line-height: 32px;
                width: 32px;
                height: 32px;
                text-decoration: none;
                color: White;
                font-size: 18px;
                font-weight: bolder;
        }
        /style>
    /head>
    body>
        p class="box">
            !--第一行(lineFirst)-->
            p class="lineF">
                p class="boxF">
                    p class="boxS">
                        p class="boxT" style="background-image: url(img/1.jpg);
    ">
                            p class="overlay">
                                a href="#">
    +/a>
                            /p>
                        /p>
                    /p>
                /p>
                p class="boxF">
                    p class="boxS">
                        p class="boxT" style="background-image: url(img/2.jpg);
    ">
                            p class="overlay">
                                a href="#">
    +/a>
                            /p>
                        /p>
                    /p>
                /p>
                p class="boxF">
                    p class="boxS">
                        p class="boxT" style="background-image: url(img/3.jpg);
    ">
                            p class="overlay">
                                a href="#">
    +/a>
                            /p>
                        /p>
                    /p>
                /p>
            /p>
            !--第二行(lineSecond)-->
            p class="lineS">
                p class="boxF">
                    p class="boxS">
                        p class="boxT" style="background-image: url(img/4.jpg);
    ">
                            p class="overlay">
                                a href="#">
    +/a>
                            /p>
                        /p>
                    /p>
                /p>
                p class="boxF">
                    p class="boxS">
                        p class="boxT" style="background-image: url(img/5.jpg);
    ">
                            p class="overlay">
                                a href="#">
    +/a>
                            /p>
                        /p>
                    /p>
                /p>
            /p>
        /p>
    /body>
    /html>
    

-- 想看效果，直接将DEMO代码复制就行了，当然，图片得你自己加了，IE9以下版本不支持。

以上就是css 怎么设置图片为六边形的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！