房山站点建设：如何使用Divi的新选项创建美丽的图像边界

2019.05.24 房山站点建设

在今天的Divi教程中，房山网络建设将向您展示如何在您构建的下一个网站上创建美丽的图像边框。这篇文章的目的是演示如何创建与您正在使用的图像(以及您网站的其他部分)匹配的漂亮结果。

有了新的Divi选项，实现惊人的结果比以往任何时候都容易。您只需做一些修改，我们将向您展示如何制作，您将准备把您的网页设计到下一个水平。我们将与您共享的所有8个示例都将只使用DiviBuilder和ImageModule提供的内置选项。

偷窥

让我们来看看您可以从这篇文章中得到的结果：

如何使用Divi的新选项创建美丽的图像边界

订阅我们的YOUTUBE频道

梯度背景

第一种可能性，你必须实现美丽的图像边界，是使用梯度背景仅。通过实验各种梯度背景设置，您可以获得简单而优雅的结果。我们将向您展示三个图像边框的例子，它们仅由一个梯度背景组成。

标准

我们将要处理的第一个例子是其中最简单和最适度的：一个标准的梯度图像边框。我们将向您展示创建的结果如下：

内容标签

从在Content选项卡中选择渐变背景开始。对于本例，我们使用了以下设置：

第一颜色：#081e8c

第二颜色：#764f9b

梯度型：线性

梯度方向：269德克

起始位置：40%

结束位置：60%

设计标签

接下来也是最后一件需要做的事情是向图像中添加一些填充。就这么简单。转到“设计”选项卡，将“10 px”添加到顶部、底部、右侧和左侧。

边

接下来，我们有一个图像边框，它只显示在图像的左边和右边。使用这种图像边框可以对图像进行很好的额外触摸，而不会将过多的注意力放在边框本身上。

内容标签

要实现这种类型的图像边框，首先在图像中添加以下梯度背景：

第一颜色：RGBA(255，255，255，0)

第二颜色：#0a8da8

梯度型：线性

梯度方向：166度

起始位置：29%

期末职位：52%

设计标签

在“设计”选项卡中，您唯一需要的是“10 px”的填充，用于右侧和左侧。

一个角落

接下来，房山网络建设还可以为您的网站上的图像创建角落背景。当您想要强调在图像中使用的颜色时，这种类型的边框非常适合使用。

内容标签

对于第三个图像示例，使用以下梯度背景：

第一颜色：RGBA(58，8，1，0.58)

第二颜色：RGBA(41，196，169，0)

梯度方向：152度

起始位置：34%

期末职位：28%

设计标签

然后，将“20 px”添加到每一个垫子中。

图像边界与梯度背景

另一种可能是将渐变背景与图像边框相结合。这也可以提供惊人的结果，因为你可以在接下来的四个例子中看到。

细微梯度

梯度背景和图像边界的第一个组合是简单而漂亮的。通过对渐变背景和边框使用相同的颜色，图像边框似乎被填充了颜色。

内容标签

首先，将以下梯度背景设置添加到图像中：

第一颜色：RGBA(255，255，255，0)

第二颜色：#777777

梯度型：线性

梯度方向：180度

起始位置：65%

期末职位：78%

设计标签

移至“设计”选项卡，并在边框子类别中使用下列设置：

使用边框：是

边框颜色：#777777

边框宽度：3 px

边框风格：实心

最后，在所有填充选项中添加一个‘7px’的填充。

异形

接下来，我们有一个很好的例子来吸引游客的注意。在本例中，图像本身包含较浅的颜色，这与较暗的边框形成了很好的平衡。

内容标签

此图像边框所需的梯度背景设置如下：

第一颜色：RGBA(53，0，188，0.1)

第二颜色：#680061

梯度类型：径向

径向：中心

起始位置：80%

结束位置：80%

设计标签

继续到“设计”选项卡并使用以下边框：

使用边框：是

边框颜色：#9a00bc

边框宽度：1 PX

边框风格：实心

向下滚动并将以下填充添加到图像中：

顶部：7 px

右：5 px

底部：7 px

左：5 px

双边界

使用双边框与梯度背景相结合也可以提供一些惊人的结果。看一看：

内容标签

我们在本例中使用的渐变背景色如下：

第一颜色：RGBA(224，43，32，0.61)

第二颜色：RGBA(12，113，195，0.87)

梯度类型：径向

径向：中心

起始位置：71%

期末职位：93%

设计标签

继续，对边界子类别使用以下设置：

使用边框：是

边框颜色：#f4f4f4(与您的部分背景色匹配)

边框宽度：8 px

边境风格：双人间

并在图像的顶部、底部、右侧和左侧添加“10 px”。

三角形角

接下来，您还可以使用渐变背景选项和虚线边框相结合，在边框中创建一些小角落。

内容标签

要实现房山网络建设在上面向您展示的图像边框，请使用以下梯度背景设置：

第一颜色：RGBA(163，103，6，0)

第二颜色：#e 09900

梯度类型：径向

径向：中心

起始位置：97%

期末职位：97%

设计标签

在Design选项卡中，我们还需要有以下边框设置：

使用边框：是

边框颜色：#e 09900

边框宽度：2 PX

边框风格：虚空

最后，我们需要一个‘8 px’的顶部，底部，左和右填充。

模式梯度背景

最后一种可能性，我们想要放在聚光灯下是使用一个模式和梯度背景在同一时间。这让你可以玩周围的外观和感觉你的形象。

嬉戏

此边框包含两种颜色的渐变背景，这两种颜色也在图像本身中使用。通过添加一个背景模式以及，图像给您的网站提供了更多的气氛。

内容标签

对于最后一个示例，我们将使用以下梯度背景设置：

第一颜色：RGBA(4，49，96，0.51)

第二颜色：RGBA(119，74，15，0.51)

梯度型：线性

梯度方向：180度

起始位置：0%

结束位置：100%

设计标签

接下来，我们还要添加一个模式背景。我们在本例中使用的模式来自顶顶。您可以将它们的模式用于各种用途，只需确保您在代码中使用它们，就像FAQ中提到的那样。添加模式背景后，还可以使用以下设置：

背景图像大小：封面

背景图像位置：中心

背景图像重复：不重复

背景图像混合：倍增

最后一件您需要做的事情是在图片的顶部、底部、右边和左边添加一个‘12 px’的填充。

最后思想

在这篇文章中，我们向您展示了一些创建美丽图像边框的不同方法。这些选项为您提供了一个透视图，您可以在不使用任何额外CSS的情况下使用新的Divi选项。如果您有任何问题或建议，请确保在房山站点建设下面的评论部分留下评论！

房山站点建设：如何使用Divi的新选项创建美丽的图像边界

相关推荐