- 首页
- 前端开发
- 背景图像，线性渐变锯齿状边缘结果需要平滑边缘
背景图像，线性渐变锯齿状边缘结果需要平滑边缘
[英] background image, linear gradient jagged edged result needs to be smooth edged
本文介绍了背景图像，线性渐变锯齿状边缘结果需要平滑边缘的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使图像的底部变尖.我试图通过在底部产生两个三角形来获得这种效果.他们必须有反应.在互联网上搜索了很多不符合我要求的示例后，这是迄今为止我设法制作的最好的示例.
body,html {高度:100%}.图片 {宽度:1410px；右边距:自动；左边距:自动；高度:500px；溢出:隐藏；位置:相对；}.指针{高度:50px；位置:绝对；底部:0；左:0；宽度:100%；}.triangleWrapper {宽度:50%；高度:50px；向左飘浮;}.lefttriangle {宽度:100%；高度:10px；左:0px；顶部:0px；背景图像:线性渐变(到右上角，#ffffff 50%，透明 50%)；}.直角三角形 {宽度:100%；高度:10px；右:0px；顶部:0px；背景:线性渐变(到左上角，#ffffff 50%，透明 50%)}
<img src="http://placekitten.com/1410/500"><div class="指针"><div class="triangleWrapper"><div style="高度:100%;"class="lefttriangle"></div>
<div class="triangleWrapper"><div style="高度:100%;"class="righttriangle"></div>
CodePen 演示
它完全按照我想要的方式工作，因为它无需媒体查询即可响应.但它在三角线上有一个锯齿状边缘，不是 90 度.
如果不是所有现代浏览器，我如何让它在大多数现代浏览器中产生流畅的线条?我不是要求向后兼容.
非常感谢任何帮助！
解决方案
不幸的是，当我们使用有角度的 linear-gradient 图像时，这总是发生，目前克服这种行为的唯一方法似乎是避免颜色的硬停止(即不要将一种颜色的停止点作为下一种颜色的起点).使第二种颜色开始时离第一种颜色的停止点稍远会产生一个模糊区域并使其看起来更平滑.这仍然不是 100% 完美，但比锯齿状边缘要好.
.lefttriangle {宽度:100%；高度:10px；左:0px；顶部:0px；背景图像:线性渐变(到右上角，#ffffff 48%，透明 50%)；/* 注意停止点和起点的变化 */}.直角三角形 {宽度:100%；高度:10px；右:0px；顶部:0px；背景:线性渐变(到左上角，#ffffff 48%，透明 50%)；/* 注意停止点和起点的变化 */}
body,html {高度:100%}.图片 {宽度:1410px；右边距:自动；左边距:自动；高度:500px；溢出:隐藏；位置:相对；}.指针{高度:50px；位置:绝对；底部:0；左:0；宽度:100%；}.triangleWrapper {宽度:50%；高度:50px；向左飘浮;}.lefttriangle {宽度:100%；高度:10px；左:0px；顶部:0px；背景图像:线性渐变(到右上角，#ffffff 48%，透明 50%)；}.直角三角形 {宽度:100%；高度:10px；右:0px；顶部:0px；背景:线性渐变(到左上角，#ffffff 48%，透明 50%)；}
<img src="http://placekitten.com/1410/500"><div class="指针"><div class="triangleWrapper"><div style="高度:100%;"class="lefttriangle"></div>
<div class="triangleWrapper"><div style="高度:100%;"class="righttriangle"></div>
<小时>替代实现:
Clip Paths:您也可以使用 clip-path 功能来产生类似的效果.使用 clip-path 的优点是它既具有响应性，又可以产生透明的剪切.基于SVG的clip-path比CSS版本有更好的浏览器支持.不过 IE 尚不支持此功能.
body,html {高度:100%}.图片 {宽度:1410px；右边距:自动；左边距:自动；高度:500px；溢出:隐藏；位置:相对；}.css-剪辑{-webkit-clip-path: 多边形(0% 0%, 0% 90%, 50% 100%, 100% 90%, 100% 0%);剪辑路径:多边形(0% 0%、0% 90%、50% 100%、100% 90%、100% 0%)；}.svg 剪辑{-webkit-clip-path: url(#clipper);-moz-clip-path: url(#clipper);剪辑路径:网址(#clipper)；}
<!-- CSS Clip-path - 较低的浏览器支持--><div class="image css-clip"><img src="http://placekitten.com/1410/500">
<!-- SVG Clip-path - 更好的浏览器支持--><svg width="0" height="0"><定义><clipPath clipPathUnits="objectBoundingBox" id="clipper"><path d="M0,0 0,0.9 0.5,1 1,0.9 1,0z"/></clipPath></defs></svg><div class="image svg-clip"><img src="http://placekitten.com/1410/500">
使用 CSS 转换:您也可以尝试使用 这个答案.它在左侧实现了尖头效果，但应该很容易调整它以在底部创建尖头效果.
body,html {高度:100%}.图片 {宽度:1410px；右边距:自动；左边距:自动；高度:500px；溢出:隐藏；位置:相对；}.top-容器，.底部容器{位置:绝对；底部:0px；高度:100%；宽度:50%；溢出:隐藏；背面可见性:隐藏；}.top-容器{左:0px；变换原点:右下角；变换:倾斜(10度)；}.底部容器{右:0px；变换原点:左下角；变换:skewY(-10deg);背景位置:0% 100%；}.top-container:after,.底部容器:在{之后位置:绝对；内容: '';高度:100%；宽度:100%；底部:-62px；/* 棕褐色(10) * (宽/2)/2 */背景:网址(http://placekitten.com/1410/500)；背景尺寸:200% 100%；}.top-container:after {左:0px；变换:skewY(-10deg);}.底部容器:在{之后右:0px；变换:倾斜(10度)；背景位置:100% 0%；}
<div class='top-container'></div><div class='bottom-container'></div>
I'm trying to make the bottom of an image pointed. I've tried to get this effect by producing two triangles at the bottom. They must be responsive. and after searching all over the internet with a lot of examples that don't work for my requirement this is the best so far I've managed to produce.
body,
html {
height: 100%
}
.image {
width: 1410px;
margin-right: auto;
margin-left: auto;
height: 500px;
overflow: hidden;
position: relative;
}
.pointer {
height: 50px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.triangleWrapper {
width: 50%;
height: 50px;
float: left;
}
.lefttriangle {
width: 100%;
height: 10px;
left: 0px;
top: 0px;
background-image: linear-gradient(to right top, #ffffff 50%, transparent 50%);
}
.righttriangle {
width: 100%;
height: 10px;
right: 0px;
top: 0px;
background: linear-gradient(to left top, #ffffff 50%, transparent 50%)
}
<div class="image">
<img src="http://placekitten.com/1410/500">
<div class="pointer">
<div class="triangleWrapper">
<div style="height: 100%;" class="lefttriangle"></div>
</div>
<div class="triangleWrapper">
<div style="height: 100%;" class="righttriangle"></div>
</div>
</div>
</div>
CodePen Demo
It works exactly how I want it to as it is responsive without the need for media queries. BUT it has a jagged edge on the triangle line that isn't 90deg.
How do I get this to produce a smooth line in most if not all modern browsers? I'm not asking for backward compatibility.
Any help is greatly appreciated!
解决方案
Unfortunately, this always happens when we use angled linear-gradient images and currently the only way to overcome this behavior seems to be to avoid hard-stopping of the colors (that is, don't make the stop point of one color as the start point of the next). Making the second color start a little farther away from the stop point of the first color would kind of create a blurred area and make it look more smoother. This is still not 100% perfect but is better than having jagged edges.
.lefttriangle {
width: 100%;
height: 10px;
left: 0px;
top: 0px;
background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%); /* note the change of stop and start points */
}
.righttriangle {
width: 100%;
height: 10px;
right: 0px;
top: 0px;
background: linear-gradient(to left top, #ffffff 48%, transparent 50%); /* note the change of stop and start points */
}
body,
html {
height: 100%
}
.image {
width: 1410px;
margin-right: auto;
margin-left: auto;
height: 500px;
overflow: hidden;
position: relative;
}
.pointer {
height: 50px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.triangleWrapper {
width: 50%;
height: 50px;
float: left;
}
.lefttriangle {
width: 100%;
height: 10px;
left: 0px;
top: 0px;
background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);
}
.righttriangle {
width: 100%;
height: 10px;
right: 0px;
top: 0px;
background: linear-gradient(to left top, #ffffff 48%, transparent 50%);
}
<div class="image">
<img src="http://placekitten.com/1410/500">
<div class="pointer">
<div class="triangleWrapper">
<div style="height: 100%;" class="lefttriangle"></div>
</div>
<div class="triangleWrapper">
<div style="height: 100%;" class="righttriangle"></div>
</div>
</div>
</div>
Alternate Implementations:
Clip Paths: You can use clip-path feature also to produce a similar effect. The advantage of using clip-path is that it is both responsive and also produces a transparent cut. The SVG based clip-path has better browser support than the CSS version. This is not yet supported in IE though.
body,
html {
height: 100%
}
.image {
width: 1410px;
margin-right: auto;
margin-left: auto;
height: 500px;
overflow: hidden;
position: relative;
}
.css-clip {
-webkit-clip-path: polygon(0% 0%, 0% 90%, 50% 100%, 100% 90%, 100% 0%);
clip-path: polygon(0% 0%, 0% 90%, 50% 100%, 100% 90%, 100% 0%);
}
.svg-clip {
-webkit-clip-path: url(#clipper);
-moz-clip-path: url(#clipper);
clip-path: url(#clipper);
}
<!-- CSS Clip-path - Lower browser support -->
<div class="image css-clip">
<img src="http://placekitten.com/1410/500">
</div>
<!-- SVG Clip-path - Better browser support -->
<svg width="0" height="0">
<defs>
<clipPath clipPathUnits="objectBoundingBox" id="clipper">
<path d="M0,0 0,0.9 0.5,1 1,0.9 1,0z" />
</clipPath>
</defs>
</svg>
<div class="image svg-clip">
<img src="http://placekitten.com/1410/500">
</div>
Using CSS Transform: You could also try using the approach mentioned in this answer. It achieves a pointed effect on the left side but it should be easy to adapt it to create a pointed effect on the bottom side.
body,
html {
height: 100%
}
.image {
width: 1410px;
margin-right: auto;
margin-left: auto;
height: 500px;
overflow: hidden;
position: relative;
}
.top-container,
.bottom-container {
position: absolute;
bottom: 0px;
height: 100%;
width: 50%;
overflow: hidden;
backface-visibility: hidden;
}
.top-container {
left: 0px;
transform-origin: right bottom;
transform: skewY(10deg);
}
.bottom-container {
right: 0px;
transform-origin: left bottom;
transform: skewY(-10deg);
background-position: 0% 100%;
}
.top-container:after,
.bottom-container:after {
position: absolute;
content: '';
height: 100%;
width: 100%;
bottom: -62px; /* tan(10) * (width/2) / 2 */
background: url(http://placekitten.com/1410/500);
background-size: 200% 100%;
}
.top-container:after {
left: 0px;
transform: skewY(-10deg);
}
.bottom-container:after {
right: 0px;
transform: skewY(10deg);
background-position: 100% 0%;
}
<div class="image">
<div class='top-container'></div>
<div class='bottom-container'></div>
</div>
这篇关于背景图像，线性渐变锯齿状边缘结果需要平滑边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
