如何使用背景渐变创建小插图 [英] How to create a vignette with background gradients

问题描述

是否在一种不使用任何实际图像文件的背景创建背景的方法，该文件的外观看起来像这样？

Is there a way to create a background without the use of any actual image files that has a gradient that looks like this?

不是木板纹理，而是左右如何变暗，然后向内变浅。

Not the wood panel texture, but how the left and right are darker and then get lighter as they go inwards.

推荐答案

Box阴影

您可以使用 box-shadow 或 radial-gradient 完成此操作。让我们看一下第一个选项：

Box Shadows

You can accomplish this with box-shadow or radial-gradient. Let's look at the first option:

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

这使用了插图阴影覆盖元素背景图片。效果类似于您的示例照片：

This uses an inset shadow which overlays the elements background image. The effect resembles your example photo:

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

You can do this pretty easily using several linear gradients, or a radial gradient:

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

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

如果您的浏览器支持渐变，封面 ，以及多个背景，您会看到类似这样的内容：

If your browser supports gradients, cover, and multiple backgrounds, you'll see something like this:

这篇关于如何使用背景渐变创建小插图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！