背景图片的移动----background-attach-----background-repeat
2024-10-18 20:20:09
background-repeat:默认是平铺的,也即是还有空间的话将一张接着一张显示
设置为 no-repeat 就最多显示一张
background-attachment:设置是否固定图片,在有滚动条的页面,随着滚动条的移动将会看到图片的不同位置
看下面的例子;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*权重:数数 id class 标签*/
/*100*/
#box {
border: 1px solid red; /*设置边框*/
width: 200px; /*图片显示的范围*/
height: 200px;
background-image: url("./timg.jpg");
background-repeat: no-repeat; /*默认平铺,no-repeat不平铺,就打印本身一张图片*/
/*background-position: 20px 20px; !*相对原来位置移动*!*/
background-position-x: -635px; /*控制图片x方向的移动*/
background-position-y: -250px; /*控制图片y方向的移动*/
background-attachment:fixed; /*设置这条可以滚动条看到的是图片的不同位置*/
} .box2 {
width: 24px;
height: 33px;
background: url("taobao.png") no-repeat 0 -265px;
background-attachment: fixed;
} </style>
</head>
<body style="height:2000px;"> /*2000px让其有滚动条*/
<div id="box" class="box"></div>
<div class="box2"></div> </body>
</html>
最新文章
- BootStrap_01之全局样式
- Device Tree(二):基本概念
- iOS设计模式
- 如丝般顺滑地从Windows迁移SQLServer数据库到Linux
- 用ccproxy + stunnel做个加密代理
- Codeforces Round #345 (Div. 2)
- 循环效率对比 js node c# mssql
- Apache Tomcat8必备知识
- 转:Linux 内核中的 cdev_alloc和cdev_add
- ufldl学习笔记和编程作业:Softmax Regression(softmax回报)
- ubuntu如何进入local、bin目录
- 来杯咖啡看Pecan
- ActiveMQ (二) 常用配置简介
- Vue 进阶之路(四)
- deepin linux学习笔记
- Struts2上传文件出错
- LOJ #2434. 「ZJOI2018」历史(LCT)
- jetty域证书更新
- MySQL5.7安装(RPM)笔记
- git初级浅入其常用操作
热门文章
- cgred不能自动将pid放入tasks
- 【转】利用Psyco提升Python运行速度
- mysql、MS SQL关于分页的sql查询语句 limit 和row_number() OVER函数
- Redis:高性能文件缓存key-value储存
- openLayer3地图的使用心得
- RC4被JDK8默认禁用导致腾讯QQ邮箱无法访问
- XE5开发Android程序调用电话相关功能(短信息和电话) [转]
- 运动目标检测中基于HSV空间的阴影去除算法
- 1123.(重、错)Is It a Complete AVL Tree
- gcc编译工具生成动态库和静态库之一----介绍