剪切或倒角图像的角落来看背景 [英] Clipping or chamfering corners of image to see background
问题描述
我有一个设计，图像的角以45°角切割。暂时，它是通过用绝对定位的跨度掩蔽它实现的，其具有设置为具有不透明白色的角cut的透明背景图像。这是远远不理想的，首先是因为额外的跨度，其次因为图像的背景是不均匀的白色。
我打算以后生成透明的PNG，但它将更加优雅，并且考虑到图像是照片 - 较少带宽密集使用JPEG和CSS。新的CSS面具属性看起来很有前途，但是据我所知，它不能提供掩盖到元素的背景的能力呢？
我的问题是，有没有任何新的CSS属性，我不知道，将允许我这样做？
h2>使用转换（因此仅限CSS3解决方案）
在下面的方法中存在少量不精确，它有两个编码缺点：
-
img
需要两个包装知道图片的大小（如果图片设置的大小，或者如果使用javascript来给出宽度/高度信息，那么图片的大小可能并不总是一个缺点）。
但是，它确实降低到IE8和更低的方角。
核心思想是调整外包装的大小，隐藏其溢出，正确的大小，旋转和缩小内包装以创建倒角（也有溢出隐藏），然后反转旋转和缩放，如果需要重新定位 img 嵌套在里面。
这是小提琴。
HTML（基本形式） p>
span 可以是 div 。
< span class =chamfer>
< span>
< img src =http://placehold.it/351x151/>
< / span>
< / span>
CSS（基本表单）
.chamfer {
overflow：hidden;
display：inline-block; / *可以是block* /
margin：25px; / *仅用于演示* /
/ *由于以下旋转，在宽度和高度上看起来像一个奇数的
数字更加一致，因为
它给出了一个中间像素其中转换
关闭
* /
width：351px; / *图像宽度* /
height：151px; / *图像高度* /
}
.chamfer> span {
overflow：hidden;
display：inline-block; / *可以是block* /
-moz-transform-origin：50％50％;
-webkit-transform-origin：50％50％;
-o-transform-origin：50％50％;
-ms-transform-origin：50％50％;
transform-origin：50％50％;
/ *旋转获得倒角角度
缩放设置剪切的大小
虽然不是很精确（确切的px高度
是不可能明确设置
* /
-moz-transform：rotate（45deg）scale（.9）;
-webkit-transform：rotate（45deg）scale（.9）;
-o- transform：（45deg）scale（.9）;
-ms-transform：rotate（45deg）scale（.9）;
transform：rotate b / *顶部/底部填充是图像宽度（351px）
减去图像高度（151px）= 200px除以2;
如果图像高于宽，则
将变为（iH-iW）/ 2用于左/右填充
* /
padding：100px 0;
margin-top：-100px; / *调整填充* /
/ *以下帮助平方项目更好* /
width：100％;
height：100％;
}
.chamfer img {
display：inline-block; / *可以是block* /
-moz-transform-origin：50％50％;
-webkit-transform-origin：50％50％;
-o-transform-origin：50％50％;
-ms-transform-origin：50％50％;
transform-origin：50％50％;
/ *旋转是逆转包装旋转
将图像再次水平，而缩放
是包装器的缩放比例，因此这里
是（1 / 0.9）= 1.11，将图像缩放到
到正确的大小
* /
-moz-transform：rotate（-45deg）scale（1.11）;
-webkit-transform：rotate（-45deg）scale（1.11）;
-o-transform：rotate（-45deg）scale（1.11）;
-ms-transform：rotate（-45deg）scale（1.11）;
transform：rotate（-45deg）scale（1.11）;
}
HTML（较小的倒角，边框为2px） / p>
看到上面的小提琴也有一个10px边框版本的大倒角。
当然，如果所有的图片都有一个设置大小的边框，你只需要像上面的基本html，而不是像我这里的覆盖类。
< span class =chamfer small b2>
< span>
< img src =http://placehold.it/351x151/>
< / span>
< / span>
CSS（覆盖上述基本css）
$ b
看到上面的小提琴也有一个10px边框版本的大倒角。
当然，如果你的所有图片一个设置大小的边框，你只需要使这些值为你的基本CSS，而不是在这里定义的单独的类中。
.b2 * {
border：2px solid black;
}
.chamfer.b2 {/ * 2px border * /
width：355px; / * 4px为2px边框添加* /
height：155px; / *为2px边框添加4px * /
}
.chamfer.b2> span {
margin-top：-102px; / *额外的2px是适应顶部边框2px * /
margin-left：-2px; / *这是为2px左边框* /
}
.chamfer.small> span {
/ *更改缩小比例的缩放* /
-moz-transform：rotate（45deg）scale（.96）;
-webkit-transform：rotate（45deg）scale（.96）;
-o-transform：rotate（45deg）scale（.96）;
-ms-transform：rotate（45deg）scale（.96）;
transform：rotate（45deg）scale（.96）;
}
.chamfer.small img {
/ * scale在包装器上更改为.96，因此将
图像的缩放比例更改为（1 / 0.96）= 1.042。
* /
-moz-transform：rotate（-45deg）scale（1.042）;
-webkit-transform：rotate（-45deg）scale（1.042）;
-o-transform：rotate（-45deg）scale（1.042）;
-ms-transform：rotate（-45deg）scale（1.042）;
transform：rotate（-45deg）scale（1.042）;
}
I have a design where corners of images are cut in a 45° angle. For the time being, it’s achieved by masking it with an absolutely positioned span, which has a transparent background image set with the corner "cut" in opaque white. This is far from ideal, first because of the additional span, second because the background of the image is not homogeneous white.
I intend to generate transparent PNGs later, but it would be more elegant and – considering the images are photographs – less bandwith-intensive to use JPEGs and CSS. The new CSS mask property seemed promising, but as I understand it does not provide the ability, to „mask through" to the background of the element, does it?
So my question is, is there any new CSS property out there which I’m not aware of and would allow me to do this?
Using Transforms (so CSS3 solution only)
There is a small amount of imprecision in the following method, and it has two "coding" drawbacks:
- Two wrappers needed on the
img - Need to know the size of the image (which may not always be a drawback if images are set sizes or if javascript is used to give width/height info).
It does, however, degrade nicely back to square corners for IE8 and lower.
The core idea is to size the outer wrapper and hide its overflow, properly size, rotate, and scale down the inner wrapper to create the chamfered corners (which also has overflow hidden), then reverse the rotation and scale back up, and reposition if needed the img nested inside. The method is robust enough to get some fairly decent borders set up if desired, though the rendering of such borders on browsers varies as to quality.
Here's the fiddle.
HTML (basic form)
The span could be a div.
<span class="chamfer">
<span>
<img src="http://placehold.it/351x151" />
</span>
</span>
CSS (basic form)
.chamfer {
overflow: hidden;
display: inline-block; /* could be "block" */
margin: 25px; /* for demo only */
/* Because of the rotations following, it seems like an odd
number in width and height worked more consistently, as
it gives a "middle" pixel by which to transform the rotation
off of
*/
width: 351px; /* width of image */
height: 151px; /* height of image */
}
.chamfer > span {
overflow: hidden;
display: inline-block; /* could be "block" */
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* The rotation gets the chamfer angle
the scale sets the "size" of the cut
though not very precisely (exact px height
is not possible to set explicitly.
*/
-moz-transform: rotate(45deg) scale(.9);
-webkit-transform: rotate(45deg) scale(.9);
-o-transform: rotate(45deg) scale(.9);
-ms-transform: rotate(45deg) scale(.9);
transform: rotate(45deg) scale(.9);
/* top/bottom padding is image width (351px)
minus the image height (151px) = 200px divided by 2;
if the image were taller than wide, then this
would become (iH - iW) / 2 for the left/right padding
*/
padding: 100px 0;
margin-top: -100px; /* adjust for the padding */
/* the following helped "square" the item better */
width: 100%;
height: 100%;
}
.chamfer img {
display: inline-block; /* could be "block" */
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* The rotation is reversing the wrapper rotation
to put the image horizontal again, while the scale
is the inverse of the wrapper's scale, so here
it is ( 1 / 0.9 ) = 1.11, to scale the image back
up to correct size
*/
-moz-transform: rotate(-45deg) scale(1.11);
-webkit-transform: rotate(-45deg) scale(1.11);
-o-transform: rotate(-45deg) scale(1.11);
-ms-transform: rotate(-45deg) scale(1.11);
transform: rotate(-45deg) scale(1.11);
}
HTML (smaller chamfer with 2px border)
See the above fiddle for a "larger" chamfer with 10px border version as well.
Of course, if all your images were getting a set sized border, you would just make this just like your base html above, and not do override classes as I have here.
<span class="chamfer small b2">
<span>
<img src="http://placehold.it/351x151" />
</span>
</span>
CSS (overrides the basic css above)
See the above fiddle for a "larger" chamfer with 10px border version as well.
Of course, if all your images were getting a set sized border, you would just make these the values of your base css, and not do it in separate classes as defined here.
.b2 * {
border: 2px solid black;
}
.chamfer.b2 { /* 2px border */
width: 355px; /* 4px added for the 2px border */
height: 155px; /* 4px added for the 2px border */
}
.chamfer.b2 > span {
margin-top: -102px; /* the extra 2px is to accomodate top border of 2px */
margin-left: -2px; /* this is for the 2px left border */
}
.chamfer.small > span {
/* changed the scale for a smaller cut */
-moz-transform: rotate(45deg) scale(.96);
-webkit-transform: rotate(45deg) scale(.96);
-o-transform: rotate(45deg) scale(.96);
-ms-transform: rotate(45deg) scale(.96);
transform: rotate(45deg) scale(.96);
}
.chamfer.small img {
/* scale changed on wrapper to .96 so scale changes on
image to ( 1 / 0.96 ) = 1.042.
*/
-moz-transform: rotate(-45deg) scale(1.042);
-webkit-transform: rotate(-45deg) scale(1.042);
-o-transform: rotate(-45deg) scale(1.042);
-ms-transform: rotate(-45deg) scale(1.042);
transform: rotate(-45deg) scale(1.042);
}
这篇关于剪切或倒角图像的角落来看背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
