背景图像，线性梯度锯齿状结果需要平滑边缘 [英] background image, linear gradient jagged edged result needs to be smooth edged

查看：1032
本文介绍了背景图像，线性梯度锯齿状结果需要平滑边缘的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想让一个图像的底部指向。我试图通过在底部产生两个三角形来获得这个效果。他们必须有反应。在搜索了所有的互联网以上的很多例子，不适用于我的要求，这是迄今为止我设法生产的最好的。



  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;背景图像：线性梯度（右上角，#ffffff 50％，透明50％）;} righttriangle {width：100％; height：10px; right：0px; top：0px;背景：线性渐变（到左上角，#ffffff 50％，透明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演示



它的工作原理，我想要它，因为它是响应，而不需要媒体查询。



如何在大多数现代浏览器中产生一条平滑的线条？我不是要求向后兼容性。



任何帮助都非常感谢！不幸的是，当我们使用有角度的 linear-gradient 时，总会发生这种情况。

解决方案

图像并且目前克服这种行为的唯一方法似乎是避免停止的颜色（即，不要使一种颜色的停止点作为下一个的起始点） 。使第二种颜色从第一种颜色的停止点开始稍微远一些会创建一个模糊区域，使其看起来更平滑。这仍然不是100％完美，但是比拥有锯齿边缘更好。

  .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％）; / *注意停止和开始点的改变* / 
} 
  

  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;背景图像：线性梯度（到右上角，#ffffff 48％，透明50％）;} righttriangle {width：100％; height：10px; right：0px; top：0px;背景：线性渐变（到左上角，#ffffff 48％，透明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>





替代实施：



剪辑路径：您可以使用 clip-path 特性也产生类似的效果。使用 clip-path 的优点是它既响应也产生透明剪切。 基于SVG的 clip-path 具有比CSS版本更好的浏览器支持。这在IE中还不支持。



  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：多边形（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  - 下浏览器支持 - >< div class =image css-clip> < img src =http://placekitten.com/1410/500>< / div><！ -  SVG Clip-path  - 更好的浏览器支持 - >< svg width =0 height =0> < defs> < clipPath clipPathUnits =objectBoundingBoxid =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>

使用CSS Transform：您还可以尝试使用这个答案。它在左侧获得了一个尖锐的效果，但它应该很容易适应它在底部创建一个尖锐的效果。



  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;高度：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：'';高度：100％;宽度：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>


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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆