如何创建具有背景渐变的晕影

Question

有没有办法创建一个背景而不使用任何具有这样的渐变的实际图像文件？

不是木板纹理,而是左右两边是如何变暗,然后随着它们向内变亮.

Answer 1

盒子阴影

你可以用box-shadow或完成这个radial-gradient.我们来看看第一个选项:

.box {
    width: 300px; height: 300px;
    box-shadow: inset 0 0 5em 1em #000;
    background: url("http://lorempixel.com/300/300");
}

这使用inset阴影覆盖元素背景图像.效果类似于您的示例照片:

径向梯度

您可以使用多个线性渐变或径向渐变来轻松完成此操作:

html {
    min-height: 100%;
    background:
        radial-gradient(transparent, black),
        url("http://lorempixel.com/500/500");
    background-size: cover;
}

小提琴:http://jsfiddle.net/jonathansampson/t8N5M/

如果您的浏览器支持渐变,封面和多个背景,您将看到如下内容: