【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,效果图如下:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/52863.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【1.4】Java微服务:服务注册和调用(Eureka和Ribbon实现)

✅作者简介&#xff1a;大家好&#xff0c;我是 Meteors., 向往着更加简洁高效的代码写法与编程方式&#xff0c;持续分享Java技术内容。 &#x1f34e;个人主页&#xff1a;Meteors.的博客 &#x1f49e;当前专栏&#xff1a; 微服务 ✨特色专栏&#xff1a; 知识分享 &#x…

企业数据,大语言模型和矢量数据库

随着ChatGPT的推出&#xff0c;通用人工智能的时代缓缓拉开序幕。我们第一次看到市场在追求人工智能开发者&#xff0c;而不是以往的开发者寻找市场。每一个企业都有大量的数据&#xff0c;私有的用户数据&#xff0c;自己积累的行业数据&#xff0c;产品数据&#xff0c;生产线…

【Linux进程篇】进程概念(1)

【Linux进程篇】进程概念&#xff08;1&#xff09; 目录 【Linux进程篇】进程概念&#xff08;1&#xff09;进程基本概念描述进程-PCBtask_struct-PCB的一种task_ struct内容分类 组织进程查看进程通过系统调用获取进程标示符通过系统调用创建进程——fork初识 作者&#xff…

2023软件设计师中级备考经验分享(文中有资料链接分享)

先摊结论吧&#xff0c;软考中级设计师备考只是备考半个月&#xff08;期间还摆烂了几天&#xff09;&#xff0c;然而成绩如下&#xff1a; 我自己都没想到会这么好的成绩。。。 上午题&#xff1a;推荐把软考通APP里的历年真题刷3-4遍&#xff0c;直接刷真题&#xff0c;然后…

分享一些精选的开源框架与代码!

今天主要是收集并精选了一些自己所了解和学习过的优秀的嵌入式开源框架代码和项目&#xff0c;不太了解的就不推荐给大家了&#xff0c;因为开源的东西实在是太多了&#xff0c;鱼龙混杂&#xff0c;所以取其精华去其糟粕是迫在眉睫的大事~ 当然也不要总是沉浸在开源的东西之中…

光伏、储能一体化监控及运维解决方案

前言 今年以来&#xff0c;在政策利好推动下光伏、风力发电、电化学储能及抽水蓄能等新能源行业发展迅速&#xff0c;装机容量均大幅度增长&#xff0c;新能源发电已经成为新型电力系统重要的组成部分&#xff0c;同时这也导致新型电力系统比传统的电力系统更为复杂&#xff0…

基于多任务学习卷积神经网络的皮肤损伤联合分割与分类

文章目录 Joint segmentation and classification of skin lesions via a multi-task learning convolutional neural network摘要本文方法实验结果 Joint segmentation and classification of skin lesions via a multi-task learning convolutional neural network 摘要 在…

idea 里 controller service impl mapper xml 切换跳转快捷键

首先在controller层&#xff0c;对着接口点方法的方法上按着ctrl和鼠标左键&#xff0c;你会进入service层。 对着方法ctrlaltb不按鼠标&#xff0c;你会进入impl层。service层的方法上按ctrl和鼠标左键会回到controller&#xff0c;ctrlaltb不按鼠标也会进入到impl层,impl上的…

vue echart3个饼图

概览&#xff1a;根据UI设计需要做3个饼图且之间有关联&#xff0c;并且处理后端返回的数据。 参考链接&#xff1a; echart 官网的一个案例&#xff0c;3个饼图 实现思路&#xff1a; 根据案例&#xff0c;把数据处理成对应的。 参考代码&#xff1a; 1.处理后端数据&am…

谐音标注外语发音的学习方式,早该终结了!

语言学习的热潮席卷全国&#xff0c;在多数80、90后记忆里尤为深刻&#xff0c;部分对外语过敏的同学&#xff0c;就像溺水的鱼&#xff0c;使劲扑棱也无济于事&#xff0c;难受但是死不了&#xff0c;在懵懂的年纪就被“摧残”了整个青春。 记忆中遇到记不住读音的单词&#x…

Python模块psycopg2连接postgresql

目录 1. 基础语法 2. 基础用法 3. 多条SQL 4. 事务SQL 1. 基础语法 语法 psycopg2.connect(dsn #指定连接参数。可以使用参数形式或 DSN 形式指定。host #指定连接数据库的主机名。dbname #指定数据库名。user #指定连接数据库使用的用户名。…

DEVICENET转ETHERNET/IP网关devicenet协议

捷米JM-EIP-DNT&#xff0c;你听说过吗&#xff1f;这是一款自主研发的ETHERNET/IP从站功能的通讯网关&#xff0c;它能够连接DEVICENET总线和ETHERNET/IP网络&#xff0c;从而解决生产管理系统中协议不同造成的数据交换互通问题。 这款产品在工业自动化领域可谓是一大利器&…

对原型、原型链的理解

在 JavaScript 中是使用构造两数来新建一个对象的&#xff0c;每一个构造函数的内部都有一个 prototype 属性&#xff0c;它的属性值是一个对象&#xff0c;这个对象包含了可以由该构造西数的所有实例共享的属性和方法。当使用构造函数新建一个对象后&#xff0c;在这个对象的内…

计算机网络(1) --- 网络介绍

目录 1.介绍协议 基础知识 协议 协议分层 OSI七层模型 2.TCP/IP五层模型 3.网络传输的基本流程 1.基本知识 协议报头 2.局域网通信的基本流程 3.网络传输流程 局域网分类 跨路由器传输 数据包封装和分用 4.网络中的地址管理 1.IP地址 2.MAC地址 3.区别 1.介绍…

每天一个电商API分享:淘宝/天猫关键字搜索店铺列表 API

淘宝/天猫搜索店铺列表 API 是一个强大而灵活的工具&#xff0c;可以帮助开发者在自己的应用中集成淘宝/天猫搜索店铺列表的功能。通过这个 API&#xff0c;开发者可以获取指定关键词下的店铺列表&#xff0c;并根据自己的需求自定义搜索条件。该 API 提供丰富的参数选项&#…

【爬虫案例】用Python爬取iPhone14的电商平台评论

用python爬取某电商网站的iPhone14评论数据&#xff0c; 爬取目标&#xff1a; 核心代码如下&#xff1a; 爬取到的5分好评&#xff1a; 爬取到的3分中评&#xff1a; 爬取到的1分差评&#xff1a; 所以说&#xff0c;用python开发爬虫真的很方面&#xff01; 您好&…

redis 高级篇4 分布式锁

一 redis架构图 1.1 redis的架构图 1.2 分布式锁满足条件 1.独占性&#xff1b;2.高可用&#xff1b;3.防死锁&#xff1b;4.不乱抢&#xff1b;5.重入性 二 分布式锁的案例情况 2.1 分布式锁1:单机分布式部署 描述&#xff1a; 使用lock锁和synchronized&#xff0c;单机…

狄耐克带着爱与希望,踏上了又一段关于奉献的旅程

路在脚下&#xff0c; 狄耐克紧盯科技前沿&#xff0c; 聚焦国家发展战略和人民美好生活需要&#xff0c; 在智慧社区和智慧医院领域 敢于筑梦、勇于追梦、勤于圆梦&#xff1b; 心系远方&#xff0c; 狄耐克真情投入奉献事业&#xff0c; 将爱与希望的种子撒向全国各地…

基于C语言 --- 自己写一个三子棋小游戏

C语言程序设计笔记---019 初阶三子棋小游戏(开源)1、arr_main.c程序大纲2、arr_game1.h3、arr_game1.c3.1、 自定义初识化函数 InitBoard( ) 和 自定义显示函数 DisPlayBoard( )3.2、 自定义玩家下棋函数 PlayerMove( )3.4、 自定义电脑下棋函数 ComputerMove( )3.5、 输赢判断…

【Linux下6818开发板(ARM)】SecureCRT串口和交叉编译工具(巨细版!)

(꒪ꇴ꒪ ),hello我是祐言博客主页&#xff1a;C语言基础,Linux基础,软件配置领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff01;送给读者的一句鸡汤&#x1f914;&#xff1a;集中起来的意志可以击穿顽石!作者水平很有限&#xff0c;如果发现错误&#x…