Question

enter image description here

有没有办法在不使用任何具有如此渐变的实际图像文件的情况下创建背景？

不是木板纹理，而是左右两边是如何变深，然后在向内时变亮。

Answer 1

Box Shadows

您可以使用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阴影覆盖元素背景图像。效果类似于您的示例照片：

enter image description here

径向渐变

使用多个线性渐变或径向渐变可以很容易地做到这一点：

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

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

如果您的浏览器支持gradients，cover和multiple backgrounds，您会看到以下内容：

enter image description here

Answer 2

您可以使用this online editor生成不同方向的渐变，例如radial，horizontal等。您还可以控制渐变的不透明度。

这里是JSFiddle链接http://jsfiddle.net/banded_krait/AZK5d/2/

Answer 3

作为网页设计师，我喜欢interstellarDust's代码的结果。

<强>理由：

渐变的停止点可自定义。所以径向渐变会给我一个很好的＆amp;圆形小插图不像方框形状渐变来自框阴影插入效果。
中心区域的0％不透明度有助于我的观众轻松聚焦在图像的中心。 （但如果您打算使用叠加明亮的彩色文字，较厚的不透明度晕影背景会使文字更具可读性。）

我在这里搞乱了渐变停止点和interstellarDust代码的不透明度：

#img_container{
    position:relative;
    z-index:-1;
    width:400px;
    height:400px;
}
#img_container img{
    position:relative;
    height:100%;
    width:100%;
    z-index:4;
}
.gradient{
    position:absolute;
    left:0px;
    top:0px;
    z-index:5;
    height:100%;
    width:100%;
    /* http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+50,0.5+100 */
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Vignette with background gradients</title>
</head>
<body>

  <p>Original by <a href="https://stackoverflow.com/a/22216780">banded_krait</a></p>

  <div id="img_container">
      <img src="http://lorempixel.com/400/400" alt="" />
      <div class="gradient"></div>
  </div>
  
  </body>
</html>

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

3 个答案:

Box Shadows

径向渐变