这篇“CSS如何设置图片为六边形”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“css如何设置图片为六边形”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题
这篇“CSS如何设置图片为六边形”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“css如何设置图片为六边形”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。
css是一种用来表现html或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。
css设置图片为六边形的方法：首先创建一个HTML示例文件；然后在body中引入图片；最后通过“transfORM: rotate(120deg);overflow: hidden;”等css样式实现图片为六边形即可。
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代码
<!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如何设置图片为六边形”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！
--结束END--
本文标题: css如何设置图片为六边形
本文链接: https://www.lsjlt.com/news/247534.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-08
2024-05-08
2024-05-08
2024-05-08
2024-05-08
2024-05-08
2024-05-08
2024-05-08
2024-05-08
2024-05-08
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0