Photoshop CSS网页制作的背景图 主题的引用样式

Photoshop制作CSS网页的背景图，主题的引用样式是网页制作中非常重要的一步，下面是一些完整攻略和示例说明：

一、Photoshop中制作背景图

1. 打开Photoshop，选择新建文档。
2. 设置文档大小为网页推荐大小，如1366×768。
3. 设计背景图，这里可以用Photoshop的各种工具和资源进行创作。
4. 点击保存，将设计好的图片保存为web所需的格式，如png、jpg等。

二、CSS样式引用

1. 新建一个网页，并在head标签中添加样式链接：<link rel="stylesheet" href="style.css">。
2. 在style.css文件中添加如下代码：

body {
  background-image: url('bg.png');
  background-repeat: no-repeat;
  background-size: cover;
}

这段代码的作用是设置背景图片并设置其显示方式。

• background-image：指定背景图片，可以使用url()函数来设置图片路径。
• background-repeat：用于设置背景图片是否可以重复显示，默认是repeat（重复显示），这里设置为no-repeat（不重复显示）。

• background-size：用于调整背景图片的大小，默认值是auto，这里设置为cover，表示图片自适应尺寸并保持纵横比例不变。

• 最后，在HTML页面中加入body标签即可。

三、示例说明

例1：在网页背景使用学校的校徽

1. 打开Photoshop，新建一个文档，大小为200×200像素。
2. 在页面中心添加学校校徽。
3. 点击保存，将图片保存为web所需的格式，如png、jpg等，存储于img文件夹下。

body {
  background-image: url('img/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

这段代码的作用是将学校的校徽设置成网页的背景图片，并显示在页面中央，图片的尺寸自适应网页大小。

例2：在网页背景使用渐变色

body {
  background: linear-gradient(to right top, #ffb347, #ff7f50, #ff6b75, #ff49a9, #f869d5);
}

这段代码的作用是设置背景色为从左上角到右下角渐变的颜色，颜色值可以自行调整，通过渐变色，可以让网页呈现出非常艺术化的效果。