css如何設(shè)置圖片為六邊形-創(chuàng)新互聯(lián)

這篇“css如何設(shè)置圖片為六邊形”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“css如何設(shè)置圖片為六邊形”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。

10年積累的成都做網(wǎng)站、網(wǎng)站制作經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有二道免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

css是什么意思

css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言，主要是用來設(shè)計網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進行格式化。

css設(shè)置圖片為六邊形的方法：首先創(chuàng)建一個HTML示例文件；然后在body中引入圖片；最后通過“transform: rotate(120deg);overflow: hidden;”等css樣式實現(xiàn)圖片為六邊形即可。

CSS3 實現(xiàn)六邊形Div圖片展示效果

一. 效果圖

css如何設(shè)置圖片為六邊形

二. 原理講解

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

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

2. overflow: hidden; 超出隱藏

3. visibility: hidden; 也是隱藏，與 display:none; 相似，但不同的是，它雖然隱藏了，但依然會在網(wǎng)頁中占有位置

我們要用到3層p進行旋轉(zhuǎn)來得到這個效果（注: 3層 p 的大小是一樣的）。最外層 p(boxF) 旋轉(zhuǎn)120度，第二層 (boxS) 旋轉(zhuǎn)-60度，第三層 (boxT) 再旋轉(zhuǎn)-60度，此時剛好回正。我們的圖片就放在第3層的 p 背景中。因為前兩層 p 中沒有東西，純粹就是用來旋轉(zhuǎn)得到6邊形的，所以對1，2層 p 設(shè)置 visibility: hidden; 而第3層 p 是放圖片的，需要顯示出來，因此設(shè)置 visibility: visible; （注: 如果你不對第3層 p 設(shè)置 visibility: visible; 那它默認就會繼承第二層 p(boxS) 的 visibility: hidden; ）。經(jīng)過旋轉(zhuǎn)肯定有超出的部分，因此對3個p都設(shè)置 overflow:hidden;

經(jīng)過旋轉(zhuǎn)和對超出部分的隱藏我們就可以得到我們想要的6邊形了。還有一點要注意，那就是p的寬高比例必須滿足4：5，不然得到的就不是6邊形了。在上面的效果圖片中。我們在第三層 (boxT) 里面還放置了一個 p(overlay)，這個 p 是用于遮罩的，當鼠標移到6邊形上時，會有遮罩效果。在 p(overlay) 里面有個a標簽，里面是個 + 號，點擊 a 標簽則彈出層，顯示大圖（注: 這個 js 效果暫時沒寫）。

三. 上面效果圖的DEMO代碼

<!DOCTYPE html><html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3 實現(xiàn)六邊形圖片展示效果</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代碼復(fù)制就行了，當然，圖片得你自己加了，IE9以下版本不支持。

以上是“css如何設(shè)置圖片為六邊形”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標題：css如何設(shè)置圖片為六邊形-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://www.bm7419.com/article26/dgcpcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、外貿(mào)建站、虛擬主機、云服務(wù)器、小程序開發(fā)、軟件開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容