页面布局中遇到菱形图片时的处理办法

第一次遇到菱形图片时感到不好处理，后来经过查资料及请问经验丰富的前端开发人员后总结了两种方法，在此写出来以供大家参考……

设计师给出的设计图类似下图：

解决办法一：

思路：首先切图的时候每个图片都顺时针旋转45°，切成圆角矩形（如下图），然后利用transform:rotate(-45deg);把图片逆时针旋转45°（因为切图的时候是顺时针旋转了45°），再利用相对定位把图片移到各自的位置上。

解决办法二：

思路：利用HTML <map> 标签，只需要一张大图，不需要切图，支持各种图形。需要事先把各定点的位置坐标标出来（以最上边的菱形为例）如下图示：

注：每个多边形的顶点坐标都是相对于整个大图的左上角的（0,0）

方法一和方法二的代码如下：

<html>
<head>
<meta charset="utf-8">
<title>菱形图片布局问题</title>
<style type="text/css" media="screen">
body{background-color:#fff;margin:0;padding:0;width:100%;  height:100%;
}
#CS{position:absolute;left:50%;height:504px;margin:0 0 0 -381px;
}
#cs img{width:180px;height:180px;margin:35px;cursor:pointer;transform:rotate(-45deg);-ms-transform:rotate(-45deg); /* Internet Explorer */-moz-transform:rotate(-45deg); /* Firefox */-webkit-transform:rotate(-45deg); /* Safari 和 Chrome */-o-transform:rotate(-45Deg); /* Opera */
}
#cs_1 img{position:relative;top:-119px;left:375Px;
}
#cs_3 img{position:relative;top:119px;left:125px;
}
#pic_all{position:relative;top:1000px;left:50%;margin-left:-500px;
}
.rect{cursor:poninter;}
</style>
</head>
<body><!--方法一--><div id="CS"><div id="cs_3"><img src="2.png" onClick="alert('3.1');"/></div><div id="cs_2"><img src="1.png" onClick="alert('2.1');"/><img class="center_pic" src="3.png" onClick="alert('2.1');"/><img class="center_pic" src="5.png" onClick="alert('3.3');"/></div><div id="cs_1"><img src="4.png" onClick="alert('1.1');"/></div></div><!--方法二--><img src="pic.png" usemap="#pic_all" alt="pic_all" id="pic_all"/><map name="pic_all" id="pic_all">  <area class="rect" shape="poly" coords="364,26,482,149,364,268,243,147" href ="" onClick="alert('OK');" alt="多边形"/>  </map>
</body>
</html>

转载于:https://www.cnblogs.com/lexie/p/5889693.html

页面布局中遇到菱形图片时的处理办法相关推荐

负值之美：负margin在页面布局中的应用
本文转载自:http://www.topcss.org/?p=94,有修改. 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这 ...
Vue单文件中引入背景图片时，四周有空白的问题
Vue单文件中引入背景图片时,四周有空白的问题问题背景初始引入背景图更新后的背景图设置问题背景近期公司有个管理系统前后端分离,但是前端人员不够,只能我们后端来凑,而在前端的开发过程中总是遇到 ...
mysql primary重复_mysql中primary key重复时的处理办法
mysql中primary key重复时的处理办法文章作者:网友投稿发布时间:2010-03-14 22:25:52 来源:网络当insert进数据表, 发生唯一key(unique key与p ...
关于静态页面布局中的一些BUG
作为一枚初级程序猿,难免在制作静态页面时会遇到一些BUG,在此,我从网上找了一些资料并且结合自己的项目开发经验,总结了一些在静态页面布局时可能会遇到的问题,希望能对初级程序猿有一定的帮助(资料请参考: ...
CSS中实现菱形图片
菱形图片制作在视觉设计中,把图片裁切为菱形是一种常见的设计手法,但在 CSS 中还没有一种简单直观的方法来实现它.事实上,直到最近,这种效果才基本成为可能.当网页设计师想要实现这种设计风格时,他们 ...
android 按钮图片文字居中显示,[Android]Android 布局中如何让图片和文字居中显示？...
图片文字居中显示 **①组件TextView的属性 drawableTop ``` 块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完 ...
关于matlab中pcolor显示图片时的shading设置问题
在用pcolor进行显示图片时,要调用colormap,caxis,shading进行设置,才有可能还原图片本来的色彩 pcolor的用法是: pcolor(N) 其中N是一个矩阵,矩阵的行列数表示图 ...
安卓页面布局中android:gravity与android:layout_gravity的区别
android:gravity 指的是在控件内的元素要排布的方向 android:layout_gravity 指的是该控件相对于父控件的显示位置当这俩个属性取多个值时可以使用'|'来分隔,且在Li ...
matlab shading颜色设置,关于matlab中pcolor显示图片时的shading设置问题
在用pcolor进行显示图片时,要调用colormap,caxis,shading进行设置,才有可能还原图片本来的色彩 pcolor的用法是: pcolor(N) 其中N是一个矩阵,矩阵的行列数表示图 ...
vue垂直布局_前端页面布局中水平、垂直居中问题
前言两年前工作时开的博客,一年前写了两篇博文,然后就到了现在才重拾起笔.原因有二,一是自觉技术不足,二曰懒. 最近由于在项目中遇到需求为拖动列可调整列顺序的表格,最后找到一款基于JQuery名为Da ...

页面布局中遇到菱形图片时的处理办法

页面布局中遇到菱形图片时的处理办法相关推荐

最新文章

热门文章