CSS实现背景图片固定

最新推荐文章于 2024-08-28 09:53:19 发布
最新推荐文章于 2024-08-28 09:53:19 发布
阅读量1w 收藏 4
点赞数 2
文章标签： CSS实现背景图片固定

CSS实现背景图片固定

很多网站的背景都是通过背景图片的repeat实现的，这样并不是不好，只是说，有时候，要找到一张repeat起来也很好看的图片简直是可遇不可求啊！但是如果不repeat的话，背景图片会随着页面滚动而滚动，效果真心不是很好看。所以，当选中一张perfect的背景图片时，设置固定就好啦！在CSS里，是通过 background-attachment: fixed 实现的。

当然，这样有个缺点就是，背景图片的大小要求铺满整个屏幕，这就要点PS基础了…额，还有个问题，就是不同设备的分辨率和屏幕大小都不一样，background-attachment: fixed 这样设计的话在不同设备下会不会造成不美观的效果呢？暂时没实践…希望实践过得人儿能分享一下你们的经验吧！

实现代码：

weixin_43104862
关注
CSS背景使用方法
iheyu(一个新手小白女PHP初学者)
12-05 605
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...
CSS：背景图像固定（也叫背景附着）
听海边涛声
06-14 573
CSS：背景图像固定（也叫背景附着）
前端CSS：CSS中的背景
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-25 823
在这个例子中，表格设置了交替的背景颜色，并且当鼠标悬停在某一行时，该行会有不同的背景颜色，增加了表格的交互性和美观度。类设置了背景图像，并且在屏幕宽度小于600px时，背景图像的大小会调整为包含整个容器区域，以适应更小的屏幕尺寸。类设置了居中的背景图像，并且当鼠标悬停时，背景图像的位置会逐渐移动到左上角，创建了一个动态的视觉效果。类设置了浅蓝色的背景颜色。通过改变背景图像的大小和位置，可以创建出动态的视觉效果，增强用户的互动体验。类设置了淡灰色的背景颜色和重复的图案背景图像，营造出一种统一的主题色彩。
CSS学习09：背景图片固定
玉安_ZhangDe的博客
03-23 1024
使用方法： 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 设置背景图片固定
weixin_44463883的博客
06-18 349
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固定页面背景图片位置的方法
12-08
关键在于`background-attachment`属性，将其设置为`fixed`，可以确保背景图片固定在视口上，不会随着页面内容的滚动而移动。以下是一个基本的CSS样式设置： ```css body { background-image: url("sakuya_and_remi...
CSS实现背景图尺寸不随浏览器缩放而变化的两种方法
12-13
现在用CSS来实现这一效果。 首先需要一张足够大尺寸的图片，上图百度背景图的尺寸为1600*1000px( 图片地址：http://4.su.bdimg.com/skin/12.jpg?2 )；花瓣背景图的尺寸为1600*1600px( 图片地址：...
css 网页背景图片 怎样用CSS实现大背景网页效果
09-25
总之，使用CSS实现大背景网页效果，需要综合运用`background`属性、颜色搭配、两张图片处理、媒体查询以及纯色边框等技术，来确保背景图片在不同分辨率显示器上都能有良好的显示效果。通过这些方法，我们可以创造出...
css控制背景示例(css设置背景图片、设置背景颜色)
09-25
4. **设置背景图片固定或滚动**： - `background-attachment:scroll;` （默认）图片随页面滚动。 - `background-attachment:fixed;` 图片固定在视口位置，不会随滚动条移动。 例如： ```css <style type="text/...
CSS固定背景的图片
天高任鸟飞
08-08 2020
CSS固定背景的图片           对于一些背景图片，当浏览器出现滚动条时，通常不希望图片随着文字的移动而移动，而是固定在某一位置。           CSS通过background-attachment的值为fixed来实现。 固定背景图片 <!-- body{ padding:0px; margin:0px; b
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——背景图片固定（不随页面大小改变而改变）
最新发布
m0_69702096的博客
08-28 519
使用 background-size 和 background-attachment：可以设置 background-size 为 auto，这样背景图片将按照它的原始尺寸显示，不会随容器大小的变化而缩放。此外，使用 background-attachment: fixed;可以将背景图片固定在视口中，而不是相对于元素。
CSS背景属性
煎饼灬果子的博客
04-20 280
Property 描述 background 简写属性，作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 background-color 设置元素的背景颜色。 background-image 把图像设置为背景。 background-position 设置背景图像的起始位置。
关于使用css 如何指定一个固定的背景图像
颂离歌博客
01-11 284
前言 今天在逛 b 站的时候发现一个特别有意思的css 样式 ， 之前我是没去使用过的，所以我觉得是比较有意思的 background-attachment 使用的是 css 里面的 background-attachment 属性 ： 值 描述 scroll 背景图片随着页面的滚动而滚动，这是默认的。 fixed 背景图片不会随着页面的滚动而滚动 local 背景图片会随着元素内容的滚动而滚动。 使用 fixed属性就可以让滚轮滚动的时候图片不跟随滚轮 代码 <!DOCT
2021-09-17 使用css设定一个固定的背景图像
qq_46074694的博客
09-17 136
代码如图所示： background-attachment属性 scroll 背景图片随着页面的滚动而滚动，这是默认的。 fixed 背景图片不会随着页面的滚动而滚动。 local 背景图片会随着元素内容的滚动而滚动。 initial 设置该属性的默认值。 inherit 指定 background-attachment 的设置应该从父元素继承。 ...
固定背景图片
★匆匆★的专栏
07-25 641
摘自《网页开发手记》 1、效果：图片不随滚动条的拖动而变化 2、知识点：css background属性 background：背景色 背景图片路径 背景平铺方式 背景是否固定 背景定位； 3、html代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww
css背景——背景颜色、背景图、平铺、位置和固定
yoghurt&girl的博客
05-31 365
1、背景图片 background-image属性描述元素的背景图像。在实际开发中常用于logo或一些装饰性的小图片和背景图片，优点是便于控制位置（精灵图也是其中一种） 语法格式： 2、背景颜色 background-color：属性值可以是颜色名、十六进制、RGB 3、背景平铺 4、背景图片位置 5、背景图片固定 scroll 背景图像随内容滚动 fixed 固定 ...
前端学习（39）：背景样式
歌谣的博客
12-07 218
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
网页背景图片固定代码实现
此外，文中还提到了另一种方法，通过创建一个无边框的表格并将背景图片地址设为表格的`background`属性来实现背景图片。这种方法适用于早期的网页设计，现在通常使用CSS来替代。 这些代码示例适用于不同的需求，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值