CSS模糊的背景图像

问题描述：

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      #image { 
       background-image:url(https://upload.wikimedia.org/wikipedia/commons/5/50/Montage_of_Toronto_7.jpg); 
       display:block; 
       width:100%; 
       height:500px; 
       position:relative; 
       background-size:cover; 
      } 
      #blur { 
       display:block; 
       position:absolute; 
       width: 300px; 
       height:300px; 
       top:50%; 
       left:50%; 
       transform:translate(-50%,-50%); 
       border-radius:150px; 
       -webkit-filter:blur(10px); filter: blur(10px); -moz-filter:blur(30px); -ms-filter: blur(10px); 
      } 
     </style> 
    </head> 
    <body> 
     <div id="image"> 
      <div id="blur"></div> 
     </div> 
    </body> 
</html>

我想要的图像的中间被模糊成点。如果我将#blur的背景颜色更改为蓝色，我可以看到它存在。但是圈子模糊不会发生。

有关如何通过CSS在图片中获取模糊圆圈的任何建议？

尝试'显示：none'而不是#blur上的块。 – kpie

完全消除模糊 – Roberrrt

答

解决方法/解决方案：

你得模糊应用到初始图像模糊它，因为你不能把它应用到一个指定的地点，我们就必须使用叠加 - 模糊这个并调整它的大小。我们可以很容易地使用你点这一点，只需添加以下CSS到当前文件：

#blur { 
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/50/Montage_of_Toronto_7.jpg); 
    background-position: center center; 
}

其结果将是这样的：

<html> 
 
    <head> 
 
     <style type="text/css"> 
 
      #image { 
 
       background-image:url(https://upload.wikimedia.org/wikipedia/commons/5/50/Montage_of_Toronto_7.jpg); 
 
       display:block; 
 
       width:500px; 
 
       height:500px; 
 
       position:relative; 
 
      } 
 
      #blur { 
 
       display:block; 
 
       position:absolute; 
 
       width: 300px; 
 
       height:300px; 
 
       top:50%; 
 
       left:50%; 
 
       background-image:url(https://upload.wikimedia.org/wikipedia/commons/5/50/Montage_of_Toronto_7.jpg); 
 
       background-position: center center; 
 
       transform:translate(-50%,-50%); 
 
       border-radius:150px; 
 
       -webkit-filter:blur(10px); filter: blur(10px); -moz-filter:blur(30px); -ms-filter: blur(10px); 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div id="image"> 
 
      <div id="blur"></div> 
 
     </div> 
 
    </body> 
 
</html>

所以这意味着如果我让'＃blur'成为可拖动的项目，那么每次都必须重新计算背景图像位置？ – John

恐怕如此约翰 – Roberrrt

哦，我稍微改变了我的问题。在我的'＃image'中，我制作了'background-size：cover;'和'width：100％;'。所以，现在中间点应该在重新调整窗口大小时模糊图像的不同区域。这将需要一个JavaScript解决方案呢？ – John

CSS模糊的背景图像

相关推荐