CSS：背景图像固定（也叫背景附着）

最新推荐文章于 2024-08-28 09:53:19 发布
最新推荐文章于 2024-08-28 09:53:19 发布
阅读量538 收藏 1
点赞数 3
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/139677457
版权

CSS的background-attachment设置背景图像是固定、还是随着页面其余部分滚动。取值有fixed、或者scroll。

  • 示例：背景图像固定，不随内容滚动
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background-image: url(images/bg.png);
      background-repeat: no-repeat;
      background-position: center 40px;
      background-attachment: fixed;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <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>近期，逛超市或者菜市场的市民发现，以往“高高在上”的牛肉价格下跌了不少。</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>

展示效果如下，内容滚动的时候，背景图片固定不变：
在这里插入图片描述

听海边涛声
关注
css零到一基础教程013：CSS 背景附着
kerryqpw的博客
03-18 229
CSS background-attachment background-attachment属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）： 实例 指定应该固定背景图像： <!DOCTYPE html> <html> <head> <style> body { background-image: url("/i/photo/tree.png"); background-repeat: no-repeat; bac.
W3school：CSS基础：CSS注释、颜色（颜色、RGB、HEX、HSL）、背景（背景、背景图像、背景重复、背景附着、简写背景属性）
薇眠winter的博客
08-03 1141
W3school：CSS基础：CSS注释、颜色（颜色、RGB、HEX、HSL）、背景（背景、背景图像、背景重复、背景附着、简写背景属性）
html+css实现滚动背景图固定
JackieDYH的博客
05-24 1875
实现页面滚动，背景图穿过的效果 注意：内部图片地址，自己替换成自己的图片 示例代码 css样式代码 * { margin: 0; padding: 0; } body, html { height: 100%; } body { font-size: 100%; font-family: Roboto, sans-serif; color: #4d4d4d; background-color: #fff; } .cd-main-c.
CSS背景使用方法
iheyu(一个新手小白女PHP初学者)
12-05 603
1.背景相关的属性——>所有标签都具有的CSS属性： 1.1.背景可以设置成某种颜色： body { background-color: red; } 1.2.背景可以设置成某张图片 body { background-image: url('123.jpg'); } 1.2.1~1.2.2. 背景是平铺的，只沿着x或y 轴平铺 body { ba...
4种CSS实现全屏背景图片铺满自适应的方式，最后一种尤其简单
(黎子)人生编码
06-17 8871
在Web设计中，背景图片是提升页面视觉效果的重要元素。实现背景图片全屏铺满且自适应是常见的需求。本文将介绍三种CSS技术，用以确保背景图片能够优雅地填充整个屏幕并适应不同设备。
CSS学习09：背景图片固定
玉安_ZhangDe的博客
03-23 1023
使用方法： background-attachment: scroll | fixed 参数 作用 scroll 背景图像是随对象内容滚动 fixed 背景图像固定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt
CSS背景固定
WangZhang_521的博客
12-27 357
背景固定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
关于使用css 如何指定一个固定的背景图像
颂离歌博客
01-11 282
前言 今天在逛 b 站的时候发现一个特别有意思的css 样式 ， 之前我是没去使用过的，所以我觉得是比较有意思的 background-attachment 使用的是 css 里面的 background-attachment 属性 ： 值 描述 scroll 背景图片随着页面的滚动而滚动，这是默认的。 fixed 背景图片不会随着页面的滚动而滚动 local 背景图片会随着元素内容的滚动而滚动。 使用 fixed属性就可以让滚轮滚动的时候图片不跟随滚轮 代码 <!DOCT
CSS-45：背景固定
臧小川的博客
10-14 324
超大背景图片 body {
CSS的背景（背景颜色，背景图片，背景平铺，背景图片位置，背景图片固定（图片附着），背景复合写法）
shy的博客
03-09 3353
CSS的背景 通过 CSS 背景属性，可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等、 背景颜色 background-color 定义元素的背景颜色 <style> a { background-color: #55585a; } </style> 元素背景颜色默认值是 transparent（透明） 背景图片 background-image 定义元素的背景图片 <styl
css背景图片固定位置_CSS固定位置背景图片
culuo8053的博客
07-25 2014
Backgrounds have become an integral part of creating a web 2.0-esque website since gradients have become all the rage. If you think gradient backgrounds are too cliche, maybe a fixed position backgro...
详解使用CSS固定页面背景图片位置的方法
09-27
固定背景图片的通常方法就是把background-attachment设成fix,进一步的话自然则是用background-position,下面来详解使用CSS固定页面背景图片及位置的方法:
曹鹏CSS视频教程-27.背景附着.rar
07-09
背景附着是CSS中一个关键概念，它涉及到如何让背景图像在元素滚动时固定或随元素移动。 【描述】提到"曹鹏CSS视频教程"是针对"顶级网页设计师的必修"课程，这暗示了这个教程具有高度的专业性和深度，旨在帮助设计师...
CSS——CSS 背景应用
流楚丶格念的博客
06-29 4406
文章目录基本属性背景图片(image)背景平铺（repeat）背景位置(position)背景附着背景简写背景透明(CSS3)背景图方位案例 基本属性 CSS 可以添加背景颜色和背景图片，以及来进行图片设置。 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 background-position 背景位置 background-attachment 背景固定还是滚动 背景的合写（复合属性
CSS固定背景
Biscuit0769
06-10 335
    关键字fixed用来将背景图片相对于浏览器窗口放置背景图片    background:black url(shell-bg.jpg) no-repeat fixed -237px 30px;  
CSS——背景图片固定（不随页面大小改变而改变）
最新发布
m0_69702096的博客
08-28 474
使用 background-size 和 background-attachment：可以设置 background-size 为 auto，这样背景图片将按照它的原始尺寸显示，不会随容器大小的变化而缩放。此外，使用 background-attachment: fixed;可以将背景图片固定在视口中，而不是相对于元素。
CSS实现背景图片固定
Linsy
05-21 9733
body {  background-image:url('bg.jpg');  background-repeat: no-repeat;  background-attachment: fixed; }  #codefans_net{ height:1628px; }
CSS 设置背景图片固定
weixin_44463883的博客
06-18 348
CSS 设置背景图片固定大小 无论屏幕如何增大 背景图片保持中间 多余两边用颜色填充,适应各种大屏幕及拉伸 css如下: .test-img{ background-image: url("./XXX.png"); background-position: center; background-size: contain; background-repeat: no-repeat; background-color: rgb(116,177,255); } ————
css:background设置背景图片
03-11
在CSS中，可以使用`background`属性来设置元素的背景图片。这个属性可以接受多种类型的值，包括URL、颜色、图片列表等。 以下是一些关于如何使用`background`属性设置背景图片的示例： 1. **设置背景图片的URL**： ```css element { background-image: url('image.jpg'); } ``` 这将把`image.jpg`设置为元素的背景图片。 2. **设置背景图片的尺寸**： ```css element { background-image: url('image.jpg'); background-size: cover; /* 图片覆盖整个元素 */ } ``` 在上面的示例中，`background-size: cover;`将使背景图片覆盖整个元素，可能不会完全显示图片的全部内容。 3. **设置背景图片的位置**： ```css element { background-image: url('image.jpg'); background-position: center center; /* 图片居中 */ } ``` 在上面的示例中，`background-position: center center;`将使背景图片在元素中心位置显示。 4. **设置背景图片的重复**： ```css element { background-image: url('image.jpg'); background-repeat: no-repeat; /* 图片不重复 */ } ``` 在上面的示例中，`background-repeat: no-repeat;`将使背景图片不重复显示。 请注意，CSS的`background`属性有很多其他的选项和属性，如`background-repeat`、`background-position`、`background-size`等，可以根据需要使用。同时，这些属性通常会应用于一个选择器（如类或元素），以便在特定的HTML元素上应用背景图像。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值