我如何模糊背景图像，但保持硬边缘？ [英] How do I blur background-image but keep hard edges?

问题描述

预期效果（模型）。

我将图像蒙版到了我的表单中的一个按钮

当我将模糊应用于背景图像时，我的按钮变得柔和，我不想要。

如何保留按钮的硬边缘，并让文字显示在最上方？

查看笔： http://codepen.io/anon/pen/PWpMpX

$ b

HTML

 < form> 
 <！ - 输入未显示 - > 
< button id =gButton>预览专辑& raquo;< /按钮> 
< / form> 
  

CSS

  button＃gButton {
 display：block; 
 width：280px; 
 height：42px; 
 border：none; 
 border-radius：11px; 
背景颜色：＃B08DC0; 
颜色：#fff; 
 font-size：16px; 
 font-weight：600; 
光标：指针; 
 
 / *背景图像下面的东西* / 
 background-image：url（https://upload.wikimedia.org/wikipedia/en/3/35/Flume_-_Skin.png） ; 
 
 background-size：140％; 
 background-position：center; 
 
 -webkit-background-clip：content-box; 
 background-clip：content-box; 
 
 color：rgba（0,0,0,0）; 
 
 -webkit-filter：blur（5px）; 
 -moz-filter：blur（5px）; 
 -o-filter：blur（5px）; 
 -ms-filter：blur（5px）; 
 filter：blur（5px）; 
} 
 
表格{
 width：280px; 
 margin：0 auto; 
 display：block; 
 text-align：center; 
 margin-top：50px; 
} 
  

解决方案

背景图像到伪元素。

button {width：280px;身高：42px;位置：相对;溢出：隐藏;背景：透明; border：1px solid＃B08DC0; border-radius：11px;颜色：#fff;} button :: before {content：'';位置：绝对; top：0;左：0; z-index：-1;宽度：100％;身高：100％; / *背景... * / background-image：url（// upload.wikimedia.org/wikipedia/en/3/35/Flume_-_Skin.png）;背景大小：140％; background-position：center; background-clip：content-box; filter：blur（5px）;}

< button>一些文字< / button>

伪元素的宽度/高度大于100％。您只需调整顶部/左侧偏移。这样，您可以删除图片边缘周围的辉光。

The desired effect (mockup).

I masked an image to a button in my form

When I apply a blur to the background-image, I get soft edges on my button, which I do not want.

How can I retain the hard edges of the button and also have the text appear on top?

View the Pen: http://codepen.io/anon/pen/PWpMpX

HTML

   <form>
     <!-- Inputs not shown -->
    <button id="gButton">Preview Album &raquo;</button>
  </form>

CSS

button#gButton{
  display: block;
  width: 280px;
  height: 42px;
  border: none;
  border-radius: 11px;
  background-color: #B08DC0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;

  /*Background Image Stuff Below*/
  background-image: url(https://upload.wikimedia.org/wikipedia/en/3/35/Flume_-_Skin.png);

  background-size: 140%;
  background-position: center;

  -webkit-background-clip: content-box;
  background-clip: content-box;

  color: rgba(0,0,0,0);

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px); 
}

form{
  width: 280px; 
  margin:0 auto; 
  display: block;
  text-align: center;
  margin-top: 50px; 
}

解决方案

I'd recommend moving the background image to a pseudo-element.

button {
    width: 280px;
    height: 42px;
    
    position: relative;
    overflow: hidden;
    background: transparent;
    border: 1px solid #B08DC0;
    border-radius: 11px;
    color: #fff;
}

button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    
    width: 100%;
    height: 100%;
    
    /* Background... */
    background-image: url(//upload.wikimedia.org/wikipedia/en/3/35/Flume_-_Skin.png);
    background-size: 140%;
    background-position: center;
    background-clip: content-box;
    filter: blur(5px);
}

<button>Some Text</button>

You can play around with having the width/height of the psuedo-element be larger than 100%. You'd just have to adjust the top/left offsets. This way, you can remove what looks like a "glow" around the edges of the image.

这篇关于我如何模糊背景图像，但保持硬边缘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！