- Dreamweaver 用户指南
- 简介
- Dreamweaver 和 Creative Cloud
- Dreamweaver 工作区和视图
- 设置站点
- 管理文件
- 布局和设计
- CSS
- 页面内容和资源
- 设置页面属性
- 设置 CSS 标题属性和 CSS 链接属性
- 使用文本
- 查找和替换文本、标签和属性
- DOM 面板
- 在实时视图中编辑
- 在 Dreamweaver 中对文档编码
- 在“文档”窗口中选择和查看元素
- 在属性检查器中设置文本属性
- 对网页进行拼写检查
- 在 Dreamweaver 中使用水平线
- 在 Dreamweaver 中添加和修改字体组合
- 使用资源
- 在 Dreamweaver 中插入和更新日期
- 在 Dreamweaver 中创建和管理收藏资源
- 在 Dreamweaver 中插入和编辑图像
- 添加媒体对象
- 在 Dreamweaver 中添加视频
- 插入 HTML5 视频
- 插入 SWF 文件
- 添加音频效果
- 在 Dreamweaver 中插入 HTML5 音频
- 使用库项目
- 在 Dreamweaver 中使用阿拉伯语和希伯来语文本
- 链接与导航
- jQuery 构件和效果
- 对网站进行编码
- 关于在 Dreamweaver 中编码
- Dreamweaver 中的编码环境
- 设置编码偏好设置
- 自定义代码颜色
- 编写和编辑代码
- 代码提示和代码完成
- 折叠和展开代码
- 使用代码片段重用代码
- 使用 linting 检查代码
- 优化代码
- 在设计视图中编辑代码
- 使用页面的头内容
- 在 Dreamweaver 中插入服务器端包含
- 在 Dreamweaver 中使用标签库
- 将自定义标签导入 Dreamweaver
- 使用 JavaScript 行为(一般说明)
- 应用内置 JavaScript 行为
- 关于 XML 和 XSLT
- 在 Dreamweaver 中执行服务器端 XSL 转换
- 在 Dreamweaver 中执行客户端 XSL 转换
- 在 Dreamweaver 中为 XSLT 添加字符实体
- 设置代码格式
- 跨产品工作流
- 模板
- 移动设备和多屏幕
- 动态网站、页面和 Web 表单
- 以可视化方式生成应用程序
- 测试、预览和发布网站
- 疑难解答
使用本主题了解如何使用 CSS Designer 面板将渐变应用于网页背景和编辑渐变。
使用“CSS 设计器”面板,可以为网站背景应用渐变效果。渐变属性在背景类别中提供。
单击渐变属性旁边的 打开“渐变”面板。使用此面板,可以:
- 从不同颜色模型(RGBa、十六进制或HSLa)中选择颜色。然后,将不同颜色组合另存为颜色色板。
- 若要将新颜色重置为原始颜色,请单击原始颜色 (K)。
- 若要更改色板的顺序,请将色板拖至所需位置。
- 若要删除色板,请将色板从面板拖出。
- 使用颜色色标创建复杂渐变。在默认色标之间的任意位置单击以创建色标。若要删除色标,请将色标从面板拖出。
- 为线性渐变指定角度。
- 要重复图案,请编辑 background-repeat 属性。
- 将自定义渐变另存为色板。
现在讲解以下代码:
background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)
- 57deg:表示线性渐变的角度
- rgba(255, 255, 255, 1.00):第一个色标的颜色
- 0%:表示色标
在 Dreamweaver 中仅支持色标的“%”值。如果使用如 px 或 em 等其他值, Dreamweaver 会将它们读作“nil”。此外,Dreamweaver 不支持 CSS 颜色,如果在代码中指定这些颜色,这些颜色会被读作“nil”。
在 Web 浏览器中呈现渐变
使用渐变作为背景时,可以配置 Dreamweaver 在不同 Web 浏览器上相应地呈现渐变。Dreamweaver 将相应的厂商前缀添加到代码中,这些代码使 Web 浏览器能够适当地显示渐变。
Dreamweaver 可按 w3c 格式编写以下供应商前缀:
- Webkit
- Firefox
- Opera
默认情况下,Dreamweaver 为 Webkit 和 Dreamweaver “实时”视图编写厂商前缀。可以从“参数设置”对话框中选择所需其他厂商(“参数设置”>“CSS 样式”)。
对于方框阴影,无论是否已在首选参数中选中 Webkit 和 w3c 前缀,均始终生成这些前缀。
对渐变所做的任何更改也会反映到厂商特定语法中。如果在 Dreamweaver CC 中打开包含厂商特定语法的现有文件,请确保您在“参数设置”中选择所需的厂商前缀。因为在默认情况下,当使用或更改渐变时,Dreamweaver 仅更新 Webkit 和有关 Dreamweaver “实时”视图的代码。因此,代码中其他厂商特定语法不会获得更新。
交换背景图像和渐变
单击一下即可更改背景图像和渐变的顺序(其在代码中出现的顺序)。
在 CSS Designer 中单击 url 或 gradient 属性旁边的箭头。
Dreamweaver CC 包含交换背景功能的基本实现。当存在多个值或图像时,交换功能可能无法按预期执行。此外,假定您有第一个图像、第二个图像和应用于背景的渐变。交换渐变会得到以下顺序:渐变、第二个图像和第一个图像。