如何使用圖像作爲自己的背景圖像？

-1

我想在我的網站上創建新的iOS音樂應用效果，並在css中將它作爲自己的background-image屬性使用，並在其上應用模糊處理。我嘗試手動，但在我的圖片中使用filter:blur()也模糊洞div。如何使用圖像作爲自己的背景圖像？

我有這樣的結構：

<div class="post-cover"> 
<img src="#"/> 
</div>

不幸的是，我不知道如何自動化想的JavaScript和jQuery或PHP。我使用WordPress和最終效果，我想擁有的是：

來源

2016-09-26 Henrique Barcelos

如果你想要的是img標籤轉換成德div標籤brackground，然後

$(".post-cover").each(function(){ 
    var img = $(this).find("img"); 
    $(this).css({ 
    "background-image": "url('"+img.prop("src")+"')", 
    //Any other CSS background propriety 
    //If your div don't have a fixed width and height 
    width: img.width(), 
    height: img.height() 
    }); 
    img.remove(); 
});

對於你的CSS用戶模糊效果的下一個樣式：

.post-cover{ 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
}

編輯所以後來同樣的JS代碼片段，但

<div style="position: relative;"> 
    <div class="blur-content"> 
    </div> 
    <div class="post-cover"> 
    <img> 
    </div> 
</div> 

.post-cover{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
.blur-content{ 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
}

來源

2016-09-26 00:15:45 Makarov

這種做法幾乎是我所需要的。但實際上我需要原始圖像在模糊之上，才能獲得該效果。 –

看看我編輯的註釋 – Makarov

不幸的是，我無法修改我的html結構..所以'blur-content' div無法創建。看起來你的舊JS方法很好，它將圖像轉換爲背景圖像屬性。難道只是複製'scr ='屬性並將其設置爲單獨的元素（以便能夠應用過濾器）？或者在後期div中應用過濾器，並將圖像url作爲僞元素插入？我不知道什麼會適合.. –

模糊只圖像使用此代碼：

.post-cover img { 
    filter:blur(); 
}

來源

2016-09-26 00:19:15 Nach

我不知道你是什麼之後。您的演示圖像和結果描述似乎不一致。從你的描述中，我想你想要這樣的東西。

.post-cover { 
 
    position: relative; 
 
    height: 400px; 
 
    width: 300px; 
 
} 
 

 
.post-cover #bg { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    filter: blur(8px); 
 
    z-index: -1 
 
} 
 

 
.post-cover #orig { 
 
    position: absolute; 
 
    top: 0; bottom: 0; left: 0; right: 0; 
 
    margin: auto; 
 
}

<div class="post-cover"> 
 
    <img id="bg" src="http://placekitten.com/g/200/300"/> 
 
    <img id="orig" src="http://placekitten.com/g/200/300"/> 
 
</div>

來源

2016-09-26 01:03:07 JonSG

如何使用圖像作爲自己的背景圖像？

回答

相關問題