CSS中background-attachment的介绍和用法

background-attachment可以设置在网页滚动时背景图片是否随着网页一起滚动，当一个盒子的高度足够大时，网页会产生滚动条，此时可以使用background-attachment属性来设置这个盒子的背景图片是否随着盒子一起滚动，background-attachment有两个属性值:fixed和scroll,使用fixed可以让背景图固定在当前相对于网页的位置；比如一个div的高度为2000px,给这个盒子设置一个背景图片（背景图片高度小于当前浏览器的可视高度），当盒子滚动时，背景图片的位置保持不变（相对于盒子滚动前的位置），

#box1{

width: 100%;

height: 2000px;

background-image: url(https://img2.baidu.com/it/u=2775440825,3201981130&fm=253&fmt=auto&app= 138&f=JPEG?w=750&h=500);

background-attachment: fixed;

background-repeat: no-repeat;

background-size: 100% auto;

}

另外一个属性值是scroll，使用此属性值会使图片随着盒子一起滚动（默认效果，不加这条属性背景图片默认跟着父盒子一起滚动）。

CSS中background-attachment的介绍和用法相关推荐

CSS中background与background-image的区别
CSS中background与background-image的区别 1.如果只是设置两张背景图不涉及CSS样式那么两者都可以使用 2.如果设置样式那就只能用background,如以下是不适用ba ...
【CSS】CSS中alt属性和title属性用法
你对CSS中的alt属性和title属性的使用是否熟悉,这里和大家分享一下两者的使用,CSS中alt属性只能用在img.area和input元素中(包括applet元素),对于input元素,alt属 ...
css中background: lighten的用法
话不多说看例子: <template><div class="btn" @click="btn">点击弹出消息提示框</div&g ...
CSS中position的absolute和relative用法
static: HTML元素的默认定位方式 absolute: 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位.而其层叠通过z-index属性定义.绝对定位的元 ...
css中background的使用总结
1 效果: 2 效果: 3 效果: 4 background-size的用法注意:盒子的大小是: 宽度:500px 高度:150px; 图片的实际大小:宽度:533px 高度:300px; 此时的 ...
Android中Adapter适配器的介绍以及用法的总结
Adapter(适配器的讲解) 适配器就我自己来看,我觉得这是一个非常重要的知识点,Adapter是用来帮助填出数据的中间桥梁,简单点说吧:将各种数据以合适的形式显示在View中给用户看.Adapte ...
css中background的属性
background-size: contain;/* background-size: 100px 100px; */ 1.background-color:设置盒子的背景颜色: backgroun ...
css中background属性引入图片url()中地址
网络图片: background: url(https://58d.oss-cn-hangzhou.aliyuncs.com/website2022/shoes.png); 本地图片: 1.项目内部: ...
CSS中background的背景属性标准写法
单个属性的写法书写格式: background-color:#CCCCCC; /*背景颜色*/background-image: url(sample.gif); /*背景图片*/backgroun ...
CSS中提升优先级属性!important的用法总结
语法选择器{样式:值!import;} 说明 div{margin-left:20px!important;margin-left:40px; } 这些浏览器支持!important属性, 也就是说 ...

CSS中background-attachment的介绍和用法

CSS中background-attachment的介绍和用法相关推荐

最新文章

热门文章