CSS固定背景的图片

最新推荐文章于 2024-05-08 15:26:56 发布
最新推荐文章于 2024-05-08 15:26:56 发布
阅读量2k 收藏 2
点赞数 2
分类专栏： ————CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nangeali/article/details/52156438
版权

CSS固定背景的图片


          对于一些背景图片，当浏览器出现滚动条时，通常不希望图片随着文字的移动而移动，而是固定在某一位置。

          CSS通过background-attachment的值为fixed来实现。

<span style="font-size:24px;"><html>
	<head>
		<title>
			固定背景图片
		</title>
		<style>
			<!--
			body{
			padding:0px;
			margin:0px;
			background-image:url(
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg);
			background-repeat:no-repeat;
			background-attachment:fixed;
		}		
			p{
			padding:10px;
			margin:5px;
			line-right:1.5em;
			font-size:32px;
		}
			-->
		</style>
	</head>
	
	<body>
		<p>CSS（Cascading Style Sheet），中文译为层叠样式表，用于控制页面样式，并允许将样式信息与网友内容分离的一种标记性语言……</p>
		<p>CSS（Cascading Style Sheet），中文译为层叠样式表，用于控制页面样式，并允许将样式信息与网友内容分离的一种标记性语言……</p>
	</body>
</html></span>

          显示效果，当拖动浏览器的滚动条时，仅仅只是文字往上移动了，背景图片没有发生任何移动，依旧在原来的位置上。


量变决定质变
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解使用CSS固定页面背景图片位置的方法
12-08
本文将详细介绍如何使用CSS来固定页面的背景图片位置，以便无论用户滚动页面，背景图片始终保持在固定的位置。这一效果可以通过设置`background-attachment`属性来实现。 首先，让我们回顾一下示例代码。在HTML中，...
css控制背景示例(css设置背景图片、设置背景颜色)
09-25
本篇主要探讨如何利用CSS来设置背景颜色和背景图片。 **一、设置背景颜色** 1. **十六进制颜色值**：`background-color:#ff0000;` 这种方式使用6位数字表示红绿蓝三种颜色的强度，例如#ff0000代表纯红色。 2. **...
CSS样式——背景图片
m0_67391270的博客
03-19 3398
文章目录 颜色color 图片image 图片大小size 重复repeat 滚动行为attachment 坐标position 位置origin 裁剪clip 颜色color 用颜色作为背景。 <div id="app"></div> * { margin: 0; padding: 0; } #app { width: 400px; height: 300px; background-color: red; } 图片image 默认会显示不全 backgrou
CSS背景属性Background详解
longxzq的专栏
03-14 5827
本文详解了CSS的背景属性Background，包括CSS3中新增的背景属性。如果你是个CSS初学者，还可以查看之前介绍的CSS浮动属性和CSS透明属性详解。 css2 中的背景(background) CSS2 中有5个主要的背景(background)属性，它们是： background-color: 指定填充背景的颜色。background-image: 引用图片作为背景。back...
前端、css背景颜色、图片、平铺、图片位置、图像固定、复合写法等、案例分析代码
最新发布
atatsuki的博客
05-08 709
背景图片:实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)二、案例分析五彩导航练习价值:1. 链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换.2. 里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码.3. 链接里面需要设置背景图片.因此需要用到背景的相关属性设置.4. 鼠标经过变化背景图片,因此需要用到链接伪类选择器.
CSS背景样式详解
大河之犬的博客
10-02 2188
颜色值有两种，一种是“关键字”，另外一种是“十六进制RGB值”。其中，关键字指的是颜色的英文名称，如red、green、blue等。属性取值为“关键字”时，也要同时设置水平方向和垂直方向的值，只不过这两个值使用关键字来代替而已。”表示背景图片距离该元素左上角的水平方向距离为12px，垂直方向距离为24px。我们在本地浏览器中拖动右边的滚动条，可以发现，背景图片在页面固定不动了。属性取值为“像素值”时，要同时设置水平方向和垂直方向的数值。属性常用取值有两种：一种是“像素值”，另外一种是“关键字”
css背景图片_CSS背景图片
cungui5726的博客
08-17 210
css背景图片CSS can also be used to place images in the background of any element. The property to do so is called, not surprisingly, background-image: CSS还可以用于将图像放置在任何元素的背景中。 毫不奇怪，这样做的属性称为background-imag...
css 设置全屏背景图片
01-19
如果你有一张比较绚烂的图片想做背景，可以这样设置： 复制代码代码如下: body{ background:url(img.jpg); background-position:center; background-repeat:no-repeat; } 但效果很可能会是这样： 图片没有重叠，...
利用jQuery和CSS将背景图片拉伸
11-22
在讲解之前，需要明确一点，背景图片的平铺可以通过CSS的`background-repeat`属性实现，但本文的重点在于背景图片的拉伸。 首先，我们介绍一种纯CSS的解决方案。CSS3引入的`background-size`属性可以帮助我们实现...
CSS实现背景图片固定
Linsy
05-21 9709
body {  background-image:url('bg.jpg');  background-repeat: no-repeat;  background-attachment: fixed; }  #codefans_net{ height:1628px; }
CSS实现背景图片详解&&全屏铺满自适应的方式
weixin_46433689的博客
05-30 1万+
问题: CSS实现背景图片全屏铺满自适应的方式 解决： （1）background-image:可添加多张背景图片。 参数：url() || none(默认) background-image: url(images/scroll_top.jpg), url(images/scroll_bottom.jpg), url(images/scroll_middle.jpg);
【css】固定图片背景制作出高级效果
KatyLight的博客
10-25 276
【css】固定图片背景制作出高级效果
CSS实现背景图片固定滚动形成视觉差效果
NINE-NINE的博客
05-03 1万+
背景图片固定，但是当我们滚动滚动条的时候感觉背景图片也随着滚动条上下滚动页面效果。
Css的背景（背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定）
m0_51495354的博客
11-10 693
Css的背景（背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定）
纯CSS3实现背景图淡入淡出轮播
weixin_42428741的博客
08-03 9917
我们以纯css3的方式来实现背景图淡入淡出，不设计js代码，首先我们来看一下思路，使用animation方法来实现这个循环的动画效果，淡入淡出效果我们通过设置opacity透明度来实现，最废话不多说，我们直接上代码。 html+css3代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta cha...
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
热门推荐
houyanhua1的专栏
03-21 5万+
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .box { width: 500px;
CSS3背景图片尺寸属性
安静的对折的专栏
01-11 2567
1、background-origin  规定 background-position 属性相对于什么位置来定位 a、padding-box 背景图像相对于内边距框来定位 b、border-box 背景图像相对于边框盒来定位 c、content-box 背景图像相对于内容框来定位 2、background-clip 规定背景的绘制区域，也就是背景图片显示的区域 a、border-box 
CSS固定图片或元素在屏幕右下角
A13330069275的博客
10-31 1万+
body{ background-image:url(http://coding.imweb.io/img/project/blog/bg.jpg); background-position:right bottom; background-repeat :no-repeat; background-attachment:fixed; background-color: white;
CSS 设置背景图片固定
weixin_44463883的博客
06-18 323
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固定背景图片
05-30
要在 CSS 中固定背景图片，可以使用 `background-attachment` 属性，将其设置为 `fixed`。如下所示： ```css body { background-image: url('your-image-url.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } ``` 这将会将背景图片固定在浏览器窗口，无论用户如何滚动页面，背景图片都会保持在同一位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值