网页背景图固定不动,不跟随滚动条滚动

简介:

我们在做网页的时候,当背景是一张完整的图片,不动让其跟随滚动条滚动,怎么办?下面详细讲解一下。

CSS代码示例-背景颜色属性(background-color):

复制代码
<html>
<head>
<title>背景颜色 background-color</title>
<style type="text/css"> body {background-color:#99FF00;} </style> </head>

<body> 
<p>这个HTML使用了CSS的background-color属性,将HTML的背景颜色变成翠绿色。<p> 
</body> 
</html>
复制代码

演示结果: 这个HTML使用了CSS的background-color属性,将HTML的背景颜色变成翠绿色。


CSS代码示例-背景图片属性(background-image):

<html><head>
<title>背景图片background-image</title></head>
<body style="background-image:url(../images/css_tutorials/background.jpg)"> <p>这个HTML使用了CSS的background-image属性,设置了背景图片。<p>
</body></html>

演示结果: 这个HTML使用了CSS的background-image属性,设置了背景图片。


CSS代码示例- 背景重复属性(background-repeat)

复制代码
<html><head>
<title>背景重复 background-repeat</title>
<
style type="text/css"> body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y} </style> </head> <body> <p>这个HTML使用了CSS的background-repeat属性,使背景图片竖向重复。<p>
<p>常用的background-repeat的属性值有: repeat-x(横向重复),repeat-x(横向重复), no-repeat(不重复)。</p>
<p>background-repeat属性要和background-image一起用。</p> </body> </html>
复制代码

演示结果: 这个HTML使用了CSS的background-repeat属性,使背景图片竖向重复。 常用的background-repeat的属性值有: repeat-x(横向重复),repeat-x(横向重复), no-repeat(不重复)。 background-repeat属性要和background-image一起用。

 

CSS代码示例-背景附着属性(background-attachment)-[背景图固定不动,不跟随滚动条滚动]:

复制代码
<html><head>
<title>背景附着属性 background-attachment</title>
<style type="text/css">
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed} </style> 
</head>
<body> 
<p>这个HTML使用了CSS的background-attachment属性,将背景图片固定,不随内容滚动而滚动。<p>
<p>背景附着(background-attachment)属性有两个值。一个是scroll,表示随内容滚动而动;一个是fixed,表示固定不动,不受内容滚动影响。缺省值是scroll。</p>
<p>background-attachment要和background-image一起用。</p> </body></html>
复制代码

演示结果: 这个HTML使用了CSS的 background-attachment 属性,将背景图片固定,不随内容滚动而滚动。

背景附着(background-attachment)属性有两个值。一个是scroll,表示随内容滚动而动;一个是fixed,表示固定不动,不受内容滚动影响。缺省值是scroll。

background-attachment要和background-image一起用。

这个HTML使用了CSS的background-attachment属性,将背景图片固定,不随内容滚动而滚动。

背景附着(background-attachment)属性有两个值。一个是scroll,表示随内容滚动而动;一个是fixed,表示固定不动,不受内容滚动影响。缺省值是scroll。

 

CSS代码示例-背景位置属性(background-position):

复制代码
<html><head>
<title>背景位置属性 background-position</title>
<
style type="text/css">
body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat;background-position:20px 60px}</style>
</head>
<body>
<p>这个HTML使用了CSS的background-position属性。这个属性和background-image属性连在一起使用,决定了背景图片的最初位置。</p>
<p>上面的代码表示背景图片的初始位置距离网页最左面20px,距离网页最上面60px。</p>
</body></html>
复制代码

演示结果: 这个HTML使用了CSS的background-position属性。这个属性和background-image属性连在一起使用,决定了背景图片的最初位置。

上面的代码表示背景图片的初始位置距离网页最左面20px,距离网页最上面60px。

 

CSS代码示例-背景属性(background):

复制代码
<html><head>
<
title>背景属性 background</title>
<style type="text/css">body{background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px} </style>
</head> <body><p>这个属性是设置背景相关属性的一种快捷的综合写法,包括background-color, background-image, background-repeat, backgroundattachment, background-position。</p>
<p>这个HTML所用的背景属性表示,网页的背景颜色是翠绿色,背景是background.jpg图片,图片不重复显示,背景图片不随内容滚动而动,背景图片距离网页最左面40px,距离网页最上面100px。</p> </body></html>
复制代码

演示结果: 这个属性是设置背景相关属性的一种快捷的综合写法, 包括background-color, background-image, background-repeat, backgroundattachment, background-position。

这个HTML所用的背景属性表示,网页的背景颜色是翠绿色,背景图片是background.jpg图片,背景图片不重复显示,背景图片不随内容滚动而动,背景图片距离网页最左面40px,距离网页最上面100px。

这个属性是设置背景相关属性的一种快捷的综合写法, 包括background-color, background-image, background-repeat, backgroundattachment, background-position。

本文转自寒意博客园博客,原文链接:http://www.cnblogs.com/hnyei/archive/2012/03/12/2392017.html,如需转载请自行联系原作者

相关文章
|
消息中间件 数据采集 SQL
【行业应用】阿里云实时计算 Flink 版金融行业解决方案
基于实时计算 Flink 版的解决方案可帮助金融机构从容应对上述挑战,通过 Flink 构建实时数仓、实时反欺诈系统,助力金融机构快速构建实时风控体系。
【行业应用】阿里云实时计算 Flink 版金融行业解决方案
|
小程序 JavaScript
【微信小程序】之自定义九宫格展示row-grid(每行显示三个)
【微信小程序】之自定义九宫格展示row-grid(每行显示三个)
|
算法 物联网 芯片
基于STM32和51单片机的8位全彩流水灯程序模板
基于STM32和51单片机的8位全彩流水灯程序模板
1046 97
|
8月前
|
数据采集 JSON 监控
京东宝贝详情数据采集指南
京东商品详情API是京东开放平台核心接口,合规、实时(延迟≤30秒)、全量获取商品结构化数据,涵盖价格、库存、图文、参数、评价等维度,支持高并发与企业级配额,广泛应用于比价监控、选品分析、ERP集成及营销推荐等场景。
|
9月前
|
机器学习/深度学习 人工智能 自然语言处理
AI时代的“义务教育”:深度拆解LLM预训练核心原理与PyTorch源码实现
本文深入解析大模型预训练核心,以Qwen2.5为例,从Tokenizer、RoPE位置编码到GQA注意力机制,拆解LLM如何通过海量数据“炼”成。涵盖架构演进、关键技术与代码实现,带你手把手理解大模型“义务教育”阶段的底层逻辑。
625 7
|
运维 分布式计算 监控
Dataphin深度评测:企业级数据中台的智能实践利器
Dataphin是一款以全链路治理、智能提效和高兼容性为核心的企业级数据中台工具,特别适用于中大型企业的复杂数据场景。其流批一体能力、资源监控工具及行业化模板库可显著提升数据治理水平并降低运维成本。通过周期补数据功能,历史数据修复效率提升约60%;智能建模功能使建模时间缩短50%。尽管在数据源支持(如SAP HANA、DB2)和用户体验上仍有改进空间,但其强大的功能使其成为构建企业级数据中台的优选工具,尤其适合零售、金融等行业需要高效数据治理与实时分析的企业。
|
10月前
|
存储 弹性计算 安全
阿里云最新云产品组合特惠:云服务器与其他云产品组合套餐配置与价格参考
为满足不同用户在不同场景下的多样化上云需求,阿里云精心推出了多款满足用户核心业务场景的组合套餐,参与套餐的云产品不仅有99元和199元等特惠云服务器,还包含对象存储 OSS 资源包、云盾证书服务、应用型负载均衡、共享流量包、通义万相模型等热门云产品。本文为大家整理汇总了阿里云产品组合购买特惠套餐的具体云产品及组合价格,以供选择参考。
|
小程序 前端开发 IDE
校园二手书交易小程序源码下载
校园二手书交易小程序有四个模块:首页、发布、消息和我的。用户可以在小程序上进行二手书交易、扫码或者输入ISBN发布二手书、用户之间可以发送聊天消息,同时小程序支持购买书籍后跑腿兼职配送,以及对订单评价等多个特色功能。
912 0
校园二手书交易小程序源码下载
|
运维 安全 Linux
【清爽加速】Windows 11 Pro 24H2-Emmy精简系统
“清爽加速”Windows 11 Pro 24H2 针对老旧或低配设备,通过精简系统、优化服务与简化装机流程,降低资源占用,提升运行流畅度,兼顾安全性与稳定性,让老设备也能轻松应对日常办公与轻度娱乐需求。
840 1
【清爽加速】Windows 11 Pro 24H2-Emmy精简系统
|
机器学习/深度学习 人工智能 算法
DeepSeek深度解析:一场「通用人工智能」的觉醒革命
DeepSeek,由幻方量化打造的国产大模型,正以彗星般的速度革新AI领域。它不仅刷新了中文AI技术基准,还在底层架构上实现颠覆性突破。文章从技术逻辑、产业影响和未来挑战三个维度解析这场AI革命。DeepSeek采用多模态神经网络设计,融合异构数据,展现通感能力;引入动态神经元编织与具身智能,提升参数效率。其混合架构在数学推理中表现卓越,并通过认知卸载机制优化长文本处理。DeepSeek正在重塑金融投研范式,推动AI原生开发模式,同时引发对伦理与硬件限制的深思。最终,DeepSeek重新诠释了“智能”本质,促使人类与AI共同进化为认知伙伴。
876 8