当前位置: 首页 > news >正文

【css】背景图片附着

属性:background-attachment 属性指定背景图像是应该滚动还是固定的(不会随页面的其余部分一起滚动)。 background-attachment: fixed:为固定; background-attachment: scroll为滚动
代码:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-image: url("/i/photo/tree.png");background-repeat: no-repeat;background-position: right top;margin-right: 200px;background-attachment: fixed;
}
</style>
</head>
<body><h1>background-attachment 属性</h1><p>background-attachment 属性指定背景图像是应该滚动还是固定的(不会随页面的其余部分滚动)。</p><p><b>提示:</b>如果看不到任何滚动条,请尝试调整浏览器窗口的大小。</p><p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p>
<p>背景图像是固定的。请尝试向下滚动页面。</p></body>
</html>

效果:
在这里插入图片描述

设置为滚动 background-attachment: scroll,效果图如下:

在这里插入图片描述

http://www.lryc.cn/news/104215.html

相关文章:

  • 解决运行flutter doctor --android-licenses时报错
  • 在使用Python爬虫时遇到503 Service Unavailable错误解决办法汇总
  • 小研究 - 主动式微服务细粒度弹性缩放算法研究(一)
  • 【LeetCode】215.数组中的第K个最大元素
  • MySQL学习记录:第七章 存储过程和函数
  • Docker中gitlab以及gitlab-runner的安装与使用
  • 一起学SF框架系列5.12-spring-beans-数据绑定dataBinding
  • 火热报名中 | 赛宁独家技术支持第七届“蓝帽杯”网络安全技能大赛
  • 无涯教程-jQuery - Ajax Tutorial函数
  • Android日志
  • 【Golang 接口自动化08】使用标准库httptest完成HTTP请求的Mock测试
  • SpringBoot自定义注解 + AOP+分布式Redis 防止重复提交
  • 3.yum安装分布式LNMP--剧本
  • 论文笔记:Fine-Grained Urban Flow Prediction
  • 系统集成|第八章(笔记)
  • 【分布式】分布式唯一 ID 的 几种生成方案以及优缺点snowflake优化方案
  • FFmpeg5.0源码阅读——av_interleaved_write_frame
  • 力扣 70. 爬楼梯
  • AVFoundation - 媒体捕捉
  • 【新版系统架构补充】-嵌入式技术
  • fpga开发--蜂鸣器发出连续不同的音调
  • Redis 主从同步原理
  • opencv-28 自适应阈值处理-cv2.adaptiveThreshold()
  • Java泛型5——泛型通配符
  • 牛客 AB25 ranko的手表 JAVA 枚举
  • 常微分方程建模R包ecode(二)——绘制相速矢量场
  • 学习C#编写上位机的基础知识和入门步骤:
  • 简单高效!低代码搭建销售自动化程序的方法与实践
  • 第九十三回 在Flutter中mock数据
  • 进程与线程的区别与联系