Question

我有一个标题，我放置了背景图像并模糊了它。但问题是图像边缘也变得模糊，从而产生不良影响。我该如何解决这个问题？

我的代码（CSS）：

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function() { 
  return `${this.x},${this.y}`; 
};

var p = new Point(1, 2);
var axisPoint = Reflect.construct(Point.bind(null /* Point */, 0), [5]);

console.log(p.toString()); // '1,2'
console.log(axisPoint.toString()); // '0,5'

axisPoint.__proto__.toString = function() { 
  return 'override'; 
}

console.log(axisPoint.toString());

HTML：

header.main::before{
    content: "";
    position: fixed;
    right: 0;
    left: 0;
    background-image: url('https://s3.envato.com/files/225054911/Network%20590x332.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    display: block;
    width: 100%;
    height: 90vh;
    -webkit-filter: blur(4px);
    -o-filter: blur(4px);
    -moz-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
}

header.main{
    position: fixed;
    left: 0;
    right: 0;
    z-index: 0;
    text-align: center;
}

当我这样做时，背景图像的边缘也会变得模糊。如何解决这个问题，以免边缘变得模糊？

Answer 1

请使用transform: scale(1.22); overflow:hidden;删除边缘模糊效果。

header.main::before{
  content: "";
  position: fixed;
  right: 0;
  left: 0;
  background-image: url('https://s3.envato.com/files/225054911/Network%20590x332.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  display: block;
  width: 100%;
  height: 90vh;
  -webkit-filter: blur(4px);
  -o-filter: blur(4px);
  -moz-filter: blur(4px);
  -ms-filter: blur(4px);
  filter: blur(4px);
  -webkit-transform: scale(1.22);
  transform: scale(1.22);
  overflow: hidden;
}

header.main{
  position: fixed;
  left: 0;
  right: 0;
  z-index: 0;
  text-align: center;
}

<header class = "main">       
       <p class = "text" style = "color: white;">Some text here. Loren Ipsum.</p>
</header>

<!-- The edge too get blurred. How to fix? -->

如何修复CSS边缘模糊效果？

1 个答案: