阿拉善盟公司网站建设:如何在整个网站中创造性地使用半透明的颜色

上周我们阿拉善盟公司网站建设介绍Divi 2.4,这是Divi历史上最大的升级,也是我们最受欢迎的WordPress主题的一次飞跃。在这个更新中有许多很棒的特性需要探索,所以很难在发布的文章中描述它们,这就是为什么我们决定做一个为期两周的信息博客文章,旨在教你如何充分利用Divi 2.4和它的新选项。在本系列的第八部分中,我将讨论在Divi中使用半透明背景色的新的和创造性的方法。

用α滑块介绍彩色灯笼

在Divi2.4中,我们引入了带有alpha控件的新颜色选择器。这些允许您选择和输入RGBA颜色值。

什么是RGBA?

RGBA是一个颜色值,由它的RGB值加上alpha值来定义,这就是那个小值a“代表。您可以将alpha值视为不透明值。

例如,…

黑色罐头有几种不同的表现方式: #000000;RGB(0,0,0);
我们可以使用第三种方法,如下所示:RGBA(0,0,0,1);在那里1在0-1的比例上表示它的不透明度.使用此比例,我们可以创建一个50%的透明黑色RGBA(0,0,0,0.5);

阿拉善盟公司网站建设

如何透明的背景色可以为您的网站增加更多的灵活性。

增加一点透明度的背景色是一个快速的方法,以实现一个内聚色调色板。你可以在下面看到真正的黑色在真正的白色是有点苛刻,而黑暗和浅灰色是比较容易的眼睛。你可能会问自己,“那为什么不直接用一个坚实的灰色值呢?”这是一个很好的问题,而且很难争辩,直到你开始在混合中加入有色背景。一个稍微透明的黑色,当它在一个白色的背景是一个简单的深灰色,但变成深蓝色的蓝色背景。

transparent-rgba-diagram

你可以看到,在白色背景下,半透明的黑色看起来和深灰色完全一样,半透明的白色看起来和浅灰色是一样的,但是当你移动到彩色背景时,RGBA值的好处就更明显了。在为页面上的元素选择背景色时,请记住这是一件好事。

透明模块背景

在Divi2.4中,模块现在的高级设计选项卡中有一个背景颜色设置。对于不同的模块,这意味着不同的事情。例如,调用到操作模块的背景色控制模块整个容器的背景色,而手风琴模块的背景色控制单个切换的背景色。以下是几个例子。

幻灯片使用透明背景

阿拉善盟公司网站建设在下面的示例中,我对滑块中的每一张幻灯片使用透明的背景色。然后,我添加了一个背景图像到部分,可以显示,由于透明度。

transparent-slides

This is what the background color picker looks like in the context of an individual slide

这是背景色选择器在单个幻灯片上下文中的样子。

使用透明模块背景色创建内聚调色板

当向已经有背景色的部分添加带有背景色的模块时,很难将这两种颜色很好地结合在一起。当你让这些颜色很好地工作时,当你改变你的背景色时会发生什么呢?

transparent-cta-bg

一个简单的方法,使这些工作在一起是使用半透明的背景色在模块上。如果你想让它的颜色略深一些,请使用半透明的黑色.如果你想要它的颜色略轻,使用半透明的白色.这就消除了选择有凝聚力的背景色的麻烦,并使将来更新章节背景变得更加容易。在这些例子中,我使用了25%的黑色和25%的白色。

transparent-cta-bg2

完全透明

接触模块是一个很好的例子,一个模块的工作与透明的背景色。当您使用完全透明并使用Divi的新边框选项添加边框时,它甚至看起来很棒。在下面的例子中,我甚至使用了半透明的边框颜色,这样背景就会显示出来。

transparent-contact-form

This is what theses settings look like the the Advanced Design Settings of the Contact Form Module.

这是这些设置看起来像高级设计设置的联系形式模块。

添加透明背景颜色以帮助模块脱离背景图像

很多时候,我们阿拉善盟公司网站建设想要两个世界中最好的。这些世界往往是文本和图像的时代。不幸的是,这两件事并不总是能很好地结合在一起,但是多亏了alpha颜色选择器,用一个快速的模块背景色很容易地解决这个问题。请注意,我在下面的每个模块中添加了40 px的自定义填充,这样内容就不会崩溃到模块的两侧。

This use of transparent color can also be really cool when using a parallax effect on your background image.

在背景图像上使用视差效果时,这种透明颜色的使用也是非常酷的。

让我们把这个例子再举一步

在上面的示例中,我对所有三个模块都使用了相同的alpha值。让我们看看当我将其转换为全宽度行、删除列槽和混合alpha值时会发生什么情况。

In this example, I have also set the row and section padding to 0 for a true gutterless look.

在本例中,我还将行和节填充设置为0,以实现真正的无沟槽外观。

在导航标题中使用完全或半透明背景色

现在阿拉善盟公司网站建设可以向导航背景色添加透明度。阅读更多关于如何自定义标题导航.

nav-example-1

nav-example-2

甚至连列都可以有背景色!

如果您在一列中有多个模块,并且希望它们都位于背景色的顶部,那么给列一个背景色是非常方便的。与其给每个模块一个背景颜色,您还可以简单地自定义它们所在的列。鉴于这篇文章是关于透明度的,下面是一个例子,说明如何使用半透明的列背景来创建一个漂亮的图像覆盖层。

transparent-column2

为了达到这一效果,我给该部分提供了视差背景图像,在第2列上添加了一个带有半透明背景颜色的两列行,并将一个简单的文本模块放置到右边的列中,为额外的呼吸空间添加了一些定制的填充。

transparent-column

使行完全宽度,移除列槽,并给出行/节零填充值,可以给这个布局一个全新的外观。

现场演示

自定义库、商店和组合模块覆盖

定制图片库图像、组合项目和商店产品的悬停覆盖很容易使用新的alpha选择器。假设您希望覆盖与您的品牌的重音颜色相匹配,您现在可以为您的悬停状态选择半透明的覆盖颜色。

transparent-hover-overlay2

Divi中的alpha选择器是另一个可以对您的网站设计产生很大影响的小的附加。阿拉善盟公司网站建设结合Divi2.4中的所有新特性,我们非常兴奋地看到您接下来要创建什么。如果您已经有机会深入了解更新,请确保在评论中发布自己的示例。





二维码