CSS 多重背景 | 您所在的位置:网站首页 › zb怎么放背景图 › CSS 多重背景 |
w3school 在线教程
HTML 系列教程
浏览器脚本
服务器脚本
编程教程
XML 系列教程
建站手册
参考手册
CSS 基础教程
CSS 教程
CSS 简介
CSS 语法
CSS 选择器
CSS 使用
CSS 注释
CSS 颜色
CSS RGB 颜色
CSS HEX 颜色
CSS HSL 颜色
CSS 背景
CSS 背景图像
CSS 背景重复
CSS 背景附着
CSS 简写背景属性
CSS 边框
CSS 边框宽度
CSS 边框颜色
CSS 边框各边
CSS 简写边框属性
CSS 圆角边框
CSS 外边距
CSS 外边距合并
CSS 内边距
CSS 高度/宽度
CSS 框模型
CSS 轮廓
CSS 轮廓宽度
CSS 轮廓颜色
CSS 简写轮廓属性
CSS 轮廓偏移
CSS 文本
CSS 文本对齐
CSS 文本装饰
CSS 文本转换
CSS 文字间距
CSS 文本阴影
CSS 字体
CSS 字体样式
CSS 字体大小
CSS 谷歌字体
CSS 简写字体属性
CSS 图标
CSS 链接
CSS 列表
CSS 表格
CSS 中级教程
CSS Display
CSS max-width
CSS 定位
CSS 溢出
CSS 浮动
CSS 清除浮动
CSS 布局 - 浮动实例
CSS inline-block
CSS 对齐
CSS 组合器
CSS 伪类
CSS 伪元素
CSS 不透明度
CSS 导航栏
CSS 垂直导航栏
CSS 水平导航栏
CSS 下拉菜单
CSS 图片库
CSS 图像精灵
CSS 属性选择器
CSS 表单
CSS 计数器
CSS 网站布局
CSS 单位
CSS 特异性
CSS3 高级教程
CSS 圆角
CSS 边框图像
CSS 背景
CSS 颜色
CSS 渐变
CSS 径向渐变
CSS 阴影
CSS box-shadow
CSS 文本效果
CSS 网络字体
CSS 2D 转换
CSS 3D 转换
CSS 过渡
CSS 动画
CSS 工具提示
CSS 图像样式
CSS object-fit
CSS 按钮
CSS 分页
CSS 多列
CSS 用户界面
CSS 变量
CSS 覆盖变量
CSS 变量 - JavaScript
CSS 变量 - 媒体查询
CSS Box Sizing
CSS Flexbox
CSS 媒体查询
CSS 媒体查询实例
CSS 响应式设计
RWD 简介
RWD 视口
RWD 网格视图
RWD 媒体查询
RWD 图像
RWD 视频
CSS 网格教程
CSS 网格布局模块
CSS 网格容器
CSS 网格项目
CSS 实例
CSS 实例
CSS 测验
CSS 测验
CSS 参考手册
CSS 参考手册
CSS 浏览器支持
CSS 选择器
CSS 函数
CSS 单位
CSS 听觉
CSS 网络安全字体
CSS 可动画制作
CSS 单位
CSS 颜色
CSS 颜色值
CSS 默认值
CSS 实体
建站手册
网站构建
万维网联盟 (W3C)
浏览器信息
网站品质
语义网
职业规划
网站主机
关于 W3School
帮助 W3School
CSS 多重背景
CSS 边框图像
CSS 颜色
在本章中,您将学习如何将多个背景图像添加到一个元素。 您还将学到以下属性: background-size background-origin background-clip CSS 多重背景CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。 不同的背景图像用逗号隔开,并且图像会彼此堆叠,其中的第一幅图像最靠近观看者。 下面的例子有两幅背景图像,第一幅图像是花朵(与底部和右侧对齐),第二幅图像是纸张背景(与左上角对齐): 实例 #example1 { background-image: url(flower.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; }亲自试一试 多重背景图像可以使用单独的背景属性(如上所述)或 background 简写属性来指定。 下面的例子使用 background 简写属性(结果与上例相同): 实例 #example1 { background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat; }亲自试一试 CSS 背景尺寸CSS background-size 属性允许您指定背景图像的大小。 可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小:contain 或 cover。 下面的例子将背景图像的大小调整为比原始图像小得多(使用像素): Lorem Ipsum DolorLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 这是代码: 实例 #div1 { background: url(img_flower.jpg); background-size: 100px 80px; background-repeat: no-repeat; }亲自试一试 background-size 的其他两个可能的值是 contain 和 cover。 contain 关键字将背景图像缩放为尽可能大的尺寸(但其宽度和高度都必须适合内容区域)。这样,取决于背景图像和背景定位区域的比例,可能存在一些未被背景图像覆盖的背景区域。 cover 关键字会缩放背景图像,以使内容区域完全被背景图像覆盖(其宽度和高度均等于或超过内容区域)。这样,背景图像的某些部分可能在背景定位区域中不可见。 下面的例子展示了 contain 和 cover 的用法: 实例 #div1 { background: url(img_flower.jpg); background-size: contain; background-repeat: no-repeat; } #div2 { background: url(img_flower.jpg); background-size: cover; background-repeat: no-repeat; }亲自试一试 定义多个背景图像的尺寸在处理多重背景时,background-size 属性还可以接受多个设置背景尺寸的值(使用逗号分隔的列表)。 下面的例子指定了三幅背景图像,每幅图像有不同的 background-size 值: 实例 #example1 { background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat; background-size: 50px, 130px, auto; }亲自试一试 全尺寸背景图像现在,我们希望网站上的背景图像始终覆盖整个浏览器窗口。 具体要求如下: 用图像填充整个页面(无空白) 根据需要缩放图像 在页面上居中图像 不引发滚动条下面的例子显示了如何实现它:使用 元素( 元素始终至少是浏览器窗口的高度)。然后在其上设置固定且居中的背景。最后使用 background-size 属性调整其大小: 实例 html { background: url(img_man.jpg) no-repeat center fixed; background-size: cover; }亲自试一试 Hero Image您还可以在 上使用不同的背景属性来创建 Hero Image(带有文本的大图像),并将其放置在您希望的位置上。 实例 .hero-image { background: url(img_man.jpg) no-repeat center; background-size: cover; height: 500px; position: relative; }亲自试一试 CSS background-origin 属性CSS background-origin 属性指定背景图像的位置。 该属性接受三个不同的值: border-box - 背景图片从边框的左上角开始 padding-box -背景图像从内边距边缘的左上角开始(默认) content-box - 背景图片从内容的左上角开始下面的示例展示了 background-origin 属性: 实例 #example1 { border: 10px solid black; padding: 35px; background: url(flower.gif); background-repeat: no-repeat; background-origin: content-box; }亲自试一试 CSS background-clip 属性CSS background-clip 属性指定背景的绘制区域。 该属性接受三个不同的值: border-box - 背景绘制到边框的外部边缘(默认) padding-box - 背景绘制到内边距的外边缘 content-box - 在内容框中绘制背景下面的例子展示了 background-clip 属性: 实例 #example1 { border: 10px dotted black; padding: 35px; background: yellow; background-clip: content-box; }亲自试一试 CSS 高级背景属性 属性 描述 background 用于在一条声明中设置所有背景属性的简写属性。 background-clip 规定背景的绘制区域。 background-image 为一个元素指定一幅或多幅背景图像。 background-origin 规定背景图像的放置位置。 background-size 规定背景图像的大小。 CSS 边框图像 CSS 颜色 CSS 参考手册 CSS 实例 CSS 测验 CSS 课外书W3School 简体中文版提供的内容仅用于培训和测试,不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有,保留一切权利。 使用条款 隐私条款 技术支持:赢科 蒙ICP备06004630号 |
CopyRight 2018-2019 实验室设备网 版权所有 |