css 3复杂背景图案_CSS3与Photoshop：复杂的背景

最新推荐文章于 2022-02-22 15:48:00 发布

翻译最新推荐文章于 2022-02-22 15:48:00 发布 · 427 阅读

文章标签：

本文教程介绍了如何使用CSS3创建复杂的背景图案，以往这些图案需要在Photoshop等图形编辑器中制作。内容涵盖了渐变背景的创建、不同变体、背景图片的使用以及如何将二者结合，从而在网页设计中实现类似Photoshop的效果，减少对服务器处理器的请求。

css 3复杂背景图案

本教程将概述如何创建复杂的背景，而过去只能通过分割在Photoshop或其他图形编辑器中创建的设计来实现。我们将研究如何使用渐变阴影以及如何将它们与多个图像背景组合以创建基本效果。你准备好了吗？

开始之前

这是众多示例中的第一篇。每个人都将利用CSS3来实现视觉效果，这些效果传统上是依赖于在Photoshop中创建图像，然后再将它们切成薄片并移植到网页设计中。这种交叉过程在程序员和设计人员之间造成了鸿沟，对设计进行切片有时可能是一个非常尴尬的任务。 CSS的局限性使得创建像倾斜或倾斜渐变之类的简单操作变得不可能。但是现在，由于有了CSS3，我们的想象力才是唯一的极限。

今天，我们将使用CSS3的多背景功能，从单个div中创建一个美观，平静的景观。

注意：所有示例均已在Mozilla Firefox，Safari和Chrome上进行了测试，如果您想在IE或任何其他浏览器中实现类似的功能，请在此处留下评论，我们将很乐意为您提供帮助。

步骤1：渐变背景

过去只有一种创建渐变背景的方法：使用Photoshop（或任何其他图形编辑软件）。例如，对于整个页面背景，我们将遵循此过程：创建一个“渐变填充层”（或对一个盒子应用“渐变叠加”效果）并将至少两个“颜料桶”设置为停止色。然后使用“裁剪”或“切片工具”，剪切1px宽的图像，并根据情况使用CSS水平或垂直重复该图像。对于经验丰富的网页设计师来说，这是一个相当合理的过程，非常快捷，而且几乎是机修工。但是，此过程有两个限制：

任何图像都表示对服务器处理器的请求。加载时间与发送到Web服务器的HTTP请求的数量成正比，因此拥有多个图像可能会导致某种程度的页面加载延迟。
您只能创建水平或垂直渐变，倾斜渐变或径向渐变（在打印设计中非常常见），而重复图像是无法实现的。大图像背景开始在高宽带中使用，但加载时间明显受到影响。

在Photoshop中，您曾经有过类似的东西。您可以从视觉颜色选择器中选择停止色，也可以写入RGB或HEX值。这和CSS3差不多。您可以将Hex或RGB颜色用于渐变。在以后的技巧中，我将向您展示如何使用RGBA颜色添加Alpha（透明度）百分比。

使用CSS3，创建经典的线性背景需要比使用背景图片多几行代码，但是这样做是值得的。这是使用CSS创建渐变的正确语法：

语法-moz（查看完整）

LINEAR: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

语法-webkit（查看完整）

-webkit-gradient(linear, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

需要指出的重要一点是，渐变被视为“背景图像”。在此示例中，我们为文档的主体分配了一个类：

<body class="linear">

然后，CSS针对该类：

/*Full page linear background */
  body.linear{
  height:100%;/* To add a full page body CSS3 gradient you need to set this height to 100% */
  
  background-repeat:no-repeat;
  
  background-image:-moz-linear-gradient(top, #0096f5, #00416a);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0096f5), to(#00416a), color-stop(1,#FFF));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#0096f5, endColorstr=#00416a);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#0096f5, endColorstr=#00416a)"; /*To avoid have a blank stripe at the bottom, there are a couple of fixes */
  /*background-attachment:fixed;*/ /*Works ok except on IE*/
  background-color:#00416a; /*The background will look nice if there's scroll, adding the bottom color all across the page*/
  }

第2步：其他变体

在图形软件中，可以通过更改停止颜色，角度和样式（线性/径向）的数量来设置渐变形状的多种变体。

在CSS3中，我们可以达到相同的结果。

语法-moz（查看完整）

LINEAR: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

径向：-moz-radial-gradient（[<位置> || <角度>，]？[<形状> || <大小>，]？<停止>，<停止> [，<停止>] *）

语法-webkit（查看完整）

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

/*Gradients*/
  .linear_gradient{
  background-image:-moz-linear-gradient(top, #6f828b, #122938);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6f828b), to(#122938), color-stop(1,#FFF));
  }
  
  .angle_gradient{
  background: -moz-linear-gradient(right top 260deg, #ffe930, #ed9700);
  background: -webkit-gradient(linear, right top, left bottom, from(#ffe930), to(#ffa200));
  }
  
  .radial_gradient{
  background: -moz-radial-gradient(50% 50%, circle farthest-corner, #ff0000, #a00000);
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(#ff0000), to(#a00000));
  }
  
  .stops_gradients{
  background: -moz-linear-gradient(top, #676767 0%, #262626 50%, #1D1D1D 50%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#676767), color-stop(0.5, #262626), color-stop(0.5, #1D1D1D), to(#000000));
}

观看演示

步骤3：背景图片

显然，我们不会永远只需要渐变作为背景，其精心设计的图像仍然是值得我们会依靠。 CSS3允许我们在背景中添加多个图像，然后还更改大小和位置。

对于多背景图像，您应该定义两个属性：“背景”和“背景尺寸”。第一个设置所有图像，URL，其位置和重复样式-第二个设置其各自的大小（默认为“自动”）。

句法

background: [<url-1> <xpos> <ypos> <repeat-style>], [<url-2> <xpos> <ypos> <repeat-style>], [<url-3> <xpos> <ypos> <repeat-style>], ... [color] ;

背景大小：
[<style> || <width-1> <height-1>]，
[<style> || <width-2> <height-2>]，
[<style> || <width-3> <height-3>]，
...
;

这是一个简单的示例，具有2张图像（一张笑脸和一张悲伤的脸）作为元素（class =“ image”）的背景，并且具有不同的大小和位置：

.images{
  
  /*Background Images*/
  background: url(images/smile.png) 50px 50px no-repeat, /* First Smile Face */
  url(images/smile.png) 350px 200px no-repeat, /* Second Smile Face */
  url(images/sad.png) 500px 120px no-repeat, /* Sad Face */
  #000; /*Color*/
  
  /*Background sizes*/ 
  background-size:	auto, /* First Smile Face */
  128px 128px, /* Second Smile Face */
  64px 64px;  /* Sad Face */
  -moz-background-size:	auto, /* First Smile Face */
  128px 128px, /* Second Smile Face */
  64px 64px;  /* Sad Face */
  -webkit-background-size:auto, /* First Smile Face */
  128px 128px, /* Second Smile Face */
  64px 64px; /* Sad Face */
}

观看演示

步骤4：将两者结合

乐趣来了！让我们创建一个风景背景。我将以前为教程创建的图像用作基础：使用Photoshop创建说明性单页Web设计，可以免费下载。

现在，您知道如何创建线性渐变并添加多个图像，可以将它们全部组合为单个div的复杂背景。从photoshop开始，您应该具有下面的屏幕快照：描绘地平线和天空的线性渐变背景，三朵云（实际上是具有不同尺寸的同一幅图像）和一座小山。然后，您只需要切片具有透明背景的云层和山峰的单个实例，或者找到一些可以使用的类似库存图像。

现在，让我们将所有内容添加为HTML元素的单个背景。

步骤5：语法

background: [<url-1> <xpos> <ypos> <repeat-style>], [<url-2> <xpos> <ypos> <repeat-style>], [<url-3> <xpos> <ypos> <repeat-style>], ... [gradient] ;

背景大小：
[<style> || <width-1> <height-1>]，
[<style> || <width-2> <height-2>]，
[<style> || <width-3> <height-3>]，
...
;

在css文件中，对于“背景”属性，首先放置图像，然后放置带有所有各自停止色的渐变。然后为“ background-size”属性设置图像的大小，并将所有渐变背景的大小保留为“ auto”。

.landscape{
  /*Background Images*/
  background: url(images/cloud.png) 100px 250px no-repeat, /*First Cloud*/ /*images go first*/
  url(images/cloud.png) 510px 170px no-repeat, /*Small Cloud*/
  url(images/cloud.png) 740px 310px no-repeat, /*Smallest Cloud*/
  url(images/mountains.png) 430px 340px no-repeat, /* Mountains */
  -moz-linear-gradient(top, #71B1D5 0%, #FFFFFF 70%, #7CB71D 70%, #5E8113 100%); /*Gradient*/	/*Gradients go last*/
  
  background: url(images/cloud.png) 100px 250px no-repeat, /*First Cloud*/ /*images go first*/
  url(images/cloud.png) 510px 170px no-repeat, /*Small Cloud*/
  url(images/cloud.png) 740px 310px no-repeat, /*Smallest Cloud*/
  url(images/mountains.png) 430px 340px no-repeat, /* Mountains */
  -webkit-gradient(linear, left top, left bottom, from(#71B1D5), color-stop(0.7, #FFFFFF), color-stop(0.7, #7CB71D), to(#5E8113));/*Gradient*/
  
  /*Background sizes*/ 
  background-size:	auto, /*First Cloud*/
  165px 50px, /*Small Cloud*/
  105px 30px, /*Smallest Cloud*/
  auto, /*Mountains*/
  auto; /*Gradient*/ 
  
  -moz-background-size:	auto, /*First Cloud*/
  165px 50px, /*Small Cloud*/
  105px 30px, /*Smallest Cloud*/
  auto, /*Mountains*/
  auto; /*Gradient*/ 
  
  -webkit-background-size:auto, /*First Cloud*/
  165px 50px, /*Small Cloud*/
  105px 30px, /*Smallest Cloud*/
  auto, /*Mountains*/
  auto; /*Gradient*/ 
}

观看演示

结论

就是这样！尝试创建结合渐变和图像的复杂背景。谢谢阅读！

翻译自: https://webdesign.tutsplus.com/articles/css3-vs-photoshop-complex-backgrounds--webdesign-3580

css 3复杂背景图案

css 3复杂背景图案_CSS3与Photoshop：复杂的背景

开始之前

步骤1：渐变背景

语法-moz（ 查看完整 ）

语法-webkit（ 查看完整 ）

第2步：其他变体

语法-moz（ 查看完整 ）

语法-webkit（ 查看完整 ）

步骤3：背景图片

句法

步骤4：将两者结合

步骤5：语法

结论

语法-moz（查看完整）

语法-webkit（查看完整）

语法-moz（查看完整）

语法-webkit（查看完整）