第五章 网页背景图片.docx
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
![preview](https://dl-preview.csdnimg.cn/24988015/0001-c8ef41804e273530a9bb0513fdbf261a_thumbnail-wide.jpeg)
![preview-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/scale.ab9e0183.png)
网页背景图片是网页设计中的一个重要元素,用于提升网站的整体视觉效果和用户体验。在CSS3中,背景图片的处理有了更多的可能性,使得设计师可以更加灵活地控制网页的外观。本章将详细探讨CSS3中关于背景图片的一些关键特性,包括背景图片大小的调整以及如何设置多背景图片。 首先,我们关注的是`background-size`属性,它允许我们将背景图片的尺寸自定义为固定的像素值。例如,`background-size: Apx Bpx;`其中,`Apx`代表图片的宽度,`Bpx`代表图片的高度。这一特性使得我们可以根据需要拉伸或缩放背景图片,以适应不同的网页布局。需要注意的是,早期版本的Firefox、Chrome、Safari和Opera等浏览器可能需要使用特定的前缀(如`-o-`和`-webkit-`)来确保兼容性。例如: ```css #backgroundSize { border: 5px solid #bd9ec4; background: url(image_1.extention) bottom right no-repeat; -o-background-size: 150px 250px; -webkit-background-size: 150px 250px; padding: 15px 25px; height: inherit; width: 590px; } ``` 在上面的代码中,我们为一个元素设置了背景图片,并通过`-o-background-size`和`-webkit-background-size`指定了图片的尺寸。 其次,CSS3还引入了设置多背景图片的功能,通过逗号分隔每个背景图片的声明。例如: ```css #backgroundMultiple { border: 5px solid #9e9aab; background: url(image_1.extention) top left no-repeat, url(image_2.extention) bottom left no-repeat, url(image_3.extention) bottom right no-repeat; padding: 15px 25px; height: inherit; width: 590px; } ``` 在这个示例中,我们为同一个元素设置了三个背景图片,每个图片的位置和重复方式都不同。这样,我们可以组合不同的图片创造出更丰富的视觉效果。 浏览器支持方面,大部分现代浏览器,如Firefox(3.05+)、Chrome(1.0.154+)、Safari(3.2.1+ for Windows)以及Opera(9.6+)都已经很好地支持了`background-size`和多背景图片的特性。不过,对于较早版本的Internet Explorer(如IE7和IE8RC1),可能需要依赖JavaScript库或者使用其他技巧来实现类似的效果。 总之,CSS3的背景图片大小调整和多背景图片功能极大地丰富了网页设计的可能性,让设计师可以更好地控制网页的视觉表现。熟练掌握这些特性,将有助于创建出更具吸引力和用户体验的网站。
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![thumb](https://img-home.csdnimg.cn/images/20210720083646.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![exe](https://img-home.csdnimg.cn/images/20210720083343.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 13
- 资源: 9万+
![benefits](https://csdnimg.cn/release/downloadcmsfe/public/img/vip-rights-1.c8e153b4.png)
![privilege](https://csdnimg.cn/release/downloadcmsfe/public/img/vip-rights-2.ec46750a.png)
![article](https://csdnimg.cn/release/downloadcmsfe/public/img/vip-rights-3.fc5e5fb6.png)
![course-privilege](https://csdnimg.cn/release/downloadcmsfe/public/img/vip-rights-4.320a6894.png)
![rights](https://csdnimg.cn/release/downloadcmsfe/public/img/vip-rights-icon.fe0226a8.png)
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)