Question

我将图像屏蔽为表格中的按钮

当我对背景图像应用模糊时，我的按钮上有柔化边缘，这是我不想要的。

如何保留按钮的硬边并让文字显示在顶部？

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; 
}

Answer 1

我建议将背景图像移动到伪元素。

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>

你可以使用psuedo-element的宽度/高度大于100％。你只需要调整顶部/左侧偏移。这样，您可以删除图像边缘周围的“发光”。

如何模糊背景图像但保留硬边？

1 个答案: