CSS模糊的背景圖像

一部分我有以下HTML/CSS代碼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在圖片中獲取模糊圓圈的任何建議？

來源

2016-11-11 John

嘗試'顯示：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>

來源

2016-11-11 14:36:46 Roberrrt

所以這意味着如果我讓'＃blur'成爲可拖動的項目，那麼每次都必須重新計算背景圖像位置？ – John

恐怕如此約翰 – Roberrrt

哦，我稍微改變了我的問題。在我的'＃image'中，我製作了'background-size：cover;'和'width：100％;'。所以，現在中間點應該在重新調整窗口大小時模糊圖像的不同區域。這將需要一個JavaScript解決方案呢？ – John

CSS模糊的背景圖像

回答

相關問題