發光圖像背景

我正在設計一個網站，該圖像背景圖像的背景發光在中心。我一直在玩以下兩種解決方案：發光圖像背景

只需創建一個背景圖像即可。缺點：我需要製作各種分辨率的背景圖像來響應不同的視口。
用文本創建一個背景圖像，然後將圖像放在身體頂部。缺點：我無法在CSS3中發光，並且我無法用一種看起來很好的方式在輝光周圍形成透明的圖像文件。

我的主要問題：有沒有一種方法，使用CSS3，在發光不僅僅是一個盒子的圖像發光？我相信答案是否定的，但我只是想確保我沒有失去任何東西。

任何其他意見將不勝感激！

2014-10-28 flasshy

Html5 Canvas元素可以對已經繪製到畫布的圖像應用發光效果。下面是發光效果的許多鏈接之一：http://stackoverflow.com/questions/13359189/glow-effect-on-html-canvas-potentially-using-convolute-kernel-matrix – markE 2014-10-28 22:58:53

如果你顯示的圖像它會要更容易幫助，但我不明白爲什麼你不能使用箱形陰影來發光？或者可能是文字陰影或文字筆觸？再次，如果你確切地展示你的內容，會更容易。 – powerbuoy 2014-10-28 23:00:34

我沒有可以分享的圖片，因爲該網站尚未投放。我道歉。 – flasshy 2014-10-28 23:13:59

我通過它的工作越多，我意識到，在背景圖像上使用透明PNG會實現我想要的結果。

謝謝大家對我的問題發表了評論，並提供了非常有幫助的答案！我非常感激！

來源

2014-11-01 14:31:03 flasshy

我不是100％確定這是否是你以後的效果，但我覺得我很接近。這是我製作的jsfiddle。大部分代碼都是在支持現代瀏覽器的前提下編寫的（但對其進行改造並不困難）。您需要做的就是在aside中創建正確的CSS3徑向漸變。

下面是我的例子中的代碼。

HTML 

<section> 
    <h4>hello world</h4> 
    <h5>this is a test</h5> 
</section> 
<aside></aside> 

CSS 

html, 
    body { 
    height: 100%; 
} 

h4, h5 { 
    margin: 0; 
    padding: 0; 
} 

body { 
    margin: 0; 
    position: relative; 
} 
section { 
    top: 50%; 
    left: 0; 
    right: 0; 
    z-index: 1; 
    position: absolute; 
    -o-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%); 
    color: white; 
    font: normal 16px/normal arial, helvetica, sans-serif; 
    text-align: center; 
} 
section h4 { 
    font-size: 56px; 
    font-weight: bold; 
} 
section h5 { 
    font-size: 34px; 
} 
aside { 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    position: absolute; 
    background: url('http://d111vui60acwyt.cloudfront.net/product_photos/469185/P037_20Swiss_20Alps_20Church_original.jpg') left top no-repeat; 
    background-size: cover; 
} 
aside:before { 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    content: ''; 
    display: block; 
    position: absolute; 
    background: rgba(255, 0, 0, .3); 
}

來源

2014-10-29 00:39:57 lindsay

非常感謝您的回答和代碼片段！我看着jsfiddle。如果「你好世界」和「這是一個測試」文本發光？在Firefox中，我看不到任何濾鏡效果。如果您打算在該文本的後面放一個光暈，那麼是的，除了沒有直線邊緣的圖像外，我正在嘗試這麼做。 – flasshy 2014-10-29 12:59:21

感謝您的回覆。我想知道你是否有過這種效果的照片？我想我明白了，但我覺得如果提供了一張照片，我可以更準確地做出來。 – lindsay 2014-10-29 22:31:02

可悲的是，我無法在此發佈圖片，因爲我的聲譽太差。 Hahaha 任何建議如何發佈樣本圖像？ – flasshy 2014-10-31 14:41:20

發光圖像背景

回答

相關問題