首頁  >  文章  >  web前端  >  css 怎麼設定圖片為六邊形

css 怎麼設定圖片為六邊形

藏色散人
藏色散人原創
2021-02-28 14:43:304205瀏覽

css設定圖片為六邊形的方法:先建立一個HTML範例檔;然後在body中引入圖片;最後透過「transform: rotate(120deg);overflow: hidden;」等css樣式實作圖片為六邊形即可。

css 怎麼設定圖片為六邊形

本教學操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。

CSS3 實現六邊形Div圖片展示效果

一.效果圖

二. 原理解說

 這個效果用到的主要知識點:

  1. transform: rotate(120deg); 圖片旋轉

  2. overflow: hidden; 超出隱藏

  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 怎麼設定圖片為六邊形的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn