Question

我正在设计一个网站，其背景图片的文字背景为中心。我一直在玩以下两种解决方案：

只需创建一个背景图像。缺点：我需要制作各种分辨率的背景图像以响应不同的视口。
使用文本创建一个背景图像，然后将图像放在身体顶部。缺点：我不能让它在CSS3中发光，我无法制作一个图像文件，其发光在发光周围是透明的，看起来很好。

我的主要问题：是否有办法使用CSS3在图像上发光，而发光不仅仅是一个盒子？我相信答案是肯定的，但我只是想确保我没有遗漏任何东西。

任何其他建议将不胜感激！

Answer 1

我不能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);
}

Answer 2

我越是通过它工作，我意识到在背景图像上使用透明的PNG将达到我想要的效果。

感谢所有评论我的问题的人，并提供了非常有用的答案！我非常感激！

与焕发图象的背景

2 个答案: