html – CSS – 将图像转换为房屋的形状
发布时间:2020-12-14 18:30:04 所属栏目:资源 来源:网络整理
导读:我有以下 HTML: figure class="pimage" a href="http://nathandasilva.co.uk/butlinps/property-item/schofield-road-loughborough-le11-4qj/" img class="attachment-homeland_property_medium wp-post-image" width="330" height="230" alt="7-0201303221
我有以下
HTML:
<figure class="pimage"> <a href="http://nathandasilva.co.uk/butlinps/property-item/schofield-road-loughborough-le11-4qj/"> <img class="attachment-homeland_property_medium wp-post-image" width="330" height="230" alt="7-020130322113404" src="http://nathandasilva.co.uk/butlinps/wp-content/uploads/2014/11/7-020130322113404-330x230.jpg"></img> </a> </figure> 我可以看到以下CSS: .page-id-11 .pimage { padding: 17px !important; background-color: #FFF; } 我希望能够做的是将图像(不扭曲)转换为基本房屋的形状,如下图所示: – 解决方法
最好的选择是使用svg.
定义内联svg clipPath(for maximum browser support)并将其应用于您的图像. <svg width="200" height="200" viewBox="0 0 200 200"> <defs> <clipPath id="shape"> <path d="M100,0 L200,60 L200,200 L0,60z" /> </clipPath> </defs> <a xlink:href="#"> <image clip-path="url(#shape)" xlink:href="http://www.lorempixel.com/200/200" x="0" y="0" height="200px" width="200px" /> </a> </svg> 一个真正的房子形状: <svg width="0" height="0"> <defs> <clipPath id="shape"> <path d="M0.5,0 L0.74,0.145 L0.74,0.085 L0.80.085 L0.8,0.179 L1,0.3 L0.90,1 L0.1,0.3 L0,0.3z" /> </clipPath> </defs> </svg> <svg width="300" height="300" viewBox="0 0 1 1"> <a xlink:href="#"> <image clip-path="url(#shape)" xlink:href="http://placehold.it/300/300" x="0" y="0" height="1px" width="1px" /> </a> </svg> 在不同的图像大小上应用相同的clipPath: 您还可以将相同的clipPath应用于不同的图像大小. 以下是300×300,200×200,100×100,50×50,25×25,12.5×12.5和5×5图像尺寸的示例. <svg width="0" height="0"> <defs> <clipPath id="shape"> <path d="M0.5,0.3z" /> </clipPath> </defs> </svg> <svg width="300" height="300" viewBox="0 0 1 1"> <a xlink:href="#"> <image clip-path="url(#shape)" xlink:href="http://placehold.it/300/300" x="0" y="0" height="1px" width="1px" /> </a> </svg> <svg width="200" height="200" viewBox="0 0 1 1"> <a xlink:href="#"> <image clip-path="url(#shape)" xlink:href="http://placehold.it/200/200" x="0" y="0" height="1px" width="1px" /> </a> </svg> <svg width="100" height="100" viewBox="0 0 1 1"> <a xlink:href="#"> <image clip-path="url(#shape)" xlink:href="http://placehold.it/100/100" x="0" y="0" height="1px" width="1px" /> </a> </svg> <svg width="50" height="50" viewBox="0 0 1 1"> <a xlink:href="#"> <image clip-path="url(#shape)" xlink:href="http://placehold.it/50/50" x="0" y="0" height="1px" width="1px" /> </a> </svg> <svg width="25" height="25" viewBox="0 0 1 1"> <a xlink:href="#"> <image clip-path="url(#shape)" xlink:href="http://placehold.it/25/25" x="0" y="0" height="1px" width="1px" /> </a> </svg> <svg width="12.5" height="12.5" viewBox="0 0 1 1"> <a xlink:href="#"> <image clip-path="url(#shape)" xlink:href="http://placehold.it/12.5/12.5" x="0" y="0" height="1px" width="1px" /> </a> </svg> <svg width="5" height="5" viewBox="0 0 1 1"> <a xlink:href="#"> <image clip-path="url(#shape)" xlink:href="http://placehold.it/5/5" x="0" y="0" height="1px" width="1px" /> </a> </svg> 要将图像放在website的容器中,如下图所示: 将您的svg代码更改为以下内容: (注意:添加了负边距(margin-top:-17px),因为你有填充:17px on .pimage) <svg width="296" viewBox="0 0 1.286956522 1" height="230" style="margin-top: -17px;"> <defs style=""> <clipPath id="shape"> <path d="M0.6434782609,0 L1.286956522,0.166666666667 L1.286956522,1 L0,0.166666666667z"></path> </clipPath> </defs> <a xlink:href="#"> <image y="-0.1" x="0" clip-path="url(#shape)" xlink:href="http://nathandasilva.co.uk/butlinps/wp-content/uploads/2014/11/7-020130322113404-330x230.jpg" height="1px" width="1.286956522px"></image> </a> </svg> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |