科技知识动态:CSS的background-attachment使用详解

导读跟大家讲解下有关CSS的background-attachment使用详解,相信小伙伴们对这个话题应该也很关注吧,现在就为小伙伴们说说CSS的background-atta

跟大家讲解下有关CSS的background-attachment使用详解,相信小伙伴们对这个话题应该也很关注吧,现在就为小伙伴们说说CSS的background-attachment使用详解,小编也收集到了有关CSS的background-attachment使用详解的相关资料,希望大家看到了会喜欢。

这次给大家带来,的注意事项有哪些,下面就是实战案例,一起来看一下。

一、background-attachment属性

在CSS中,使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动。 语法: background-attachment:scroll/fixed; 说明: background-attachment 属性只有2个属性值。scroll表示背景图像随对象滚动而滚动,是默认选项;fixed表示背景图像固定在页面不动,只有其他的内容随滚动条滚动。

举例:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> #p1 { width:160px; height:1200px; border:1px solid gray; background-image:url("cartoongirl.gif"); background-repeat:no-repeat; background-attachment:fixed; } </style></head><body> <p id="p1"></p></body></html>

在浏览器预览效果如下:

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

CSS有几种实现三栏布局的方法

CSS与Sass开发规范

CSS做出鼠标上移图标旋转

以上就是CSS的background-attachment使用详解的详细内容,更多请关注php中文网其它相关文章!

来源:php中文网

免责声明:本文由用户上传,如有侵权请联系删除!