如何使用背景渐变创建小插图

本文介绍了如何使用背景渐变创建小插图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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;
}

小提琴：

如果您的浏览器支持，，以及，您会看到类似这样的内容：

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

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

that