发光图像背景

我正在设计一个网站，该图像背景图像的背景发光在中心。我一直在玩以下两种解决方案：发光图像背景

只需创建一个背景图像即可。缺点：我需要制作各种分辨率的背景图像来响应不同的视口。
用文本创建一个背景图像，然后将图像放在身体顶部。缺点：我无法在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

发光图像背景

回答

相关问题