【css】背景图片附着

news2024/10/6 16:26:03

属性: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.coloradmin.cn/o/819837.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

TypeScript基础学习

目录 一、安装 1、下载国内镜像 2、安装 3、查看安装情况 4、使用例子 二、变量声明 1、规则 2、声明的四种方式 3、注意 4、类型断言 5、类型推断 6、变量作用域 三、基础类型&#xff08;共11种&#xff09; 1、Any 类型 2、Null 和 Undefined 3、never 类型…

医药化工企业洁净厂房改造消防防爆安全的重要性

设计 【摘要】&#xff1a;近年来&#xff0c;我国医药化工企业规模不断扩大。医药化工企业的情况复杂&#xff0c;稍有不慎将发生火灾或者爆炸&#xff0c;对人员生命以及财产安全造成巨大的损害&#xff0c;酿成悲剧。所以&#xff0c;“三同时”原则的落实&#xff0c;如何…

伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码

伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓IOS前端纯原生源码&#xff0c; 后端是java源码。

tinkerCAD案例:30. 冰球挑战赛

tinkerCAD案例&#xff1a;30. 冰球挑战赛 这些简单易学、循序渐进的 Tinkercad 课程将指导你设计出属于自己的超棒曲棍球冰球&#xff1b;这些设计将性能和风格推向了极限&#xff01; 本课有两个目标利用科学方法提高曲棍球球的性能。通过在冰球上添加图案&#xff0c;发挥设…

rust怎么搞的,这么简单的代码也报“borrow of moved value“?

奇了怪了&#xff0c;这么简单的代码也编译不过&#xff1f; let hello String::from("hello");let world hello;hello.push_str("world"); // error[E0382]: borrow of moved value: hello看下完整报错 error[E0382]: borrow of moved value: hello--&…

picgo 图床 七牛云的设置

网站 PicGo github Molunerfinn/PicGo: &#x1f680;A simple & beautiful tool for pictures uploading built by vue-cli-electron-builder PicGo/Awesome-PicGo: A collection of awesome projects using PicGo. 设置 AcccessKey (AK) SecretKey(SK) 在个人中心&…

HarmonyOS学习路之方舟开发框架—学习ArkTS语言(状态管理 三)

Link装饰器&#xff1a;父子双向同步 子组件中被Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。 概述 Link装饰的变量与其父组件中的数据源共享相同的值。 装饰器使用规则说明 Link变量装饰器 说明 装饰器参数 无 同步类型 双向同步。 父组件中State, Stor…

无法访问Microsoft Store

可以先试试把代理工具关了 如果不行 winr, 输入inetcpl.cpl 勾上TLS 1.1,TSL1.2 重启&#xff0c;再试试

react学习笔记——1. hello react

包含的包一共有4个&#xff0c;分别的作用如下&#xff1a; babel.min.js&#xff1a;可以进行ES6到ES5的语法转换&#xff1b;可以用于import&#xff1b;可以用于将jsx转换为js。注意&#xff0c;在开发的时候&#xff0c;这个转换&#xff08;jsx转换js&#xff09;不在线上…

杨辉三角,给定一个非负整数 numRows,生成「杨辉三角」的前 numRows 行。

题记&#xff1a; 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]] 示例 2: 输入: numRows 1 输出: …

千元内初学者吉他买什么好?SAGA萨伽SF700和VEAZEN费森VZ200评测对比,哪一款更出众适合新手入门选购!

大部分了解过相关吉他知识或者有点音乐意识的初学者&#xff0c;都会摒弃烧火棍去选择买一把千元单板&#xff0c;亦或者少数资金充足的琴友会选择更贵的吉他。所以翻阅很多有关吉他推荐的帖子&#xff0c;我们可以看到在千元的价位里&#xff0c; **VEAZEN费森VZ200和 SAGA萨伽…

ZeRO Memory Optimizations Toward Training Trillion Parameter Models

1总述 Zero Redundancy Optimizer: 提高了可以被有效训练的模型的大小&#xff0c;极大提高了模型训练的速度。 保持了较小的通信量保持较高的计算粒度 数据并行DP 并没有减少每个device上的内存占用当模型有1.4B 参数时&#xff0c;就会超过GPU的32GB显存通过PP, MP&#…

P4D编程遇到乱码?别急,这里有解决方案!

P4D简介&#xff1a; P4D&#xff08;Python for Delphi&#xff09;是一种用于在Delphi开发环境中嵌入Python的技术&#xff0c;它允许开发人员使用Python语言编写脚本和模块&#xff0c;然后将其集成到Delphi应用程序中。这使得开发人员可以利用Python的强大功能来扩展和增强…

JavaWeb(7)——前端综合案例1(面向对象)

一、需求 JS进阶-day3-184-综合案例-模态框构造函数写法 二、 实现 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta…

Meta AI研究团队新AI模型:Segment Anything图像分割任务

Segment Anything是Meta AI研究团队开发的一种新的AI模型&#xff0c;用于图像分割任务。该模型可以对任何图像中的任何对象进行分割&#xff0c;即将对象从图像中"剪切"出来。Segment Anything模型&#xff08;SAM&#xff09;是一个可提示的模型&#xff0c;可以根…

Linux常用命令——dpkg-preconfigure命令

在线Linux命令查询工具 dpkg-preconfigure Debian Linux中软件包安装之前询问问题 补充说明 dpkg-preconfigure命令用于在Debian Linux中软件包安装之前询问问题。 语法 dpkg-preconfigure(选项)(参数)选项 -f&#xff1a;选择使用的前端&#xff1b; -p&#xff1a;感兴…

我国科学家揭秘河蚌铰链耐疲劳的秘密

《科学》杂志发表了中国科学技术大学俞书宏院士团队联合吴恒安教授团队的研究成果。他们揭示了河蚌铰链耐疲劳的奥秘&#xff0c;并提出了一种耐疲劳材料设计的新思路。 在此次研究中&#xff0c;研究人员探明了河蚌铰链中折扇形组织的设计原理&#xff0c;发现这种生物组织在河…

【Redis】内存数据库 Redis 基础

目录 内存数据库Redis概念Redis 安装Redis的启动方式Redis命令行客户端 Redis通用命令Redis key结构Redis value数据类型String 和基础操作Hash 和基础操作List 和基础操作Set 和基础操作Sorted_set 和基础操作 Redis的Java客户端Jedis客户端SpringDataRedis客户端自定义RedisT…

Linux下 Docker容器引擎基础(1)

简述&#xff1a; Docker的容器技术可以在一台主机上轻松为任何应用创建一个轻量级的、可移植的、自给自足的容器。通过这种容器打包应用程序&#xff0c;意味着简化了重新部署、调试这些琐碎的重复工作&#xff0c;极大的提高了工作效率。例如&#xff1a;项目从腾讯云迁移阿…

机器学习-New Optimization

机器学习(New Optimization) 前言&#xff1a; 学习资料 videopptblog 下面的PPT里面有一些符号错误&#xff0c;但是我还是按照PPT的内容编写公式&#xff0c;自己直到符号表示什么含义就好了 Notation 符号解释 θ t \theta_t θt​第 t 步时&#xff0c;模型的参数 Δ L …