css 怎麼設定圖片為六邊形-css教學-PHP中文網

首頁

web前端

css教學

css 怎麼設定圖片為六邊形

藏色散人

Feb 28, 2021 pm 02:43 PM

css

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

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

本網站聲明

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