找回密码
 注册

QQ登录

只需一步,快速开始

查看: 1434|回复: 6

[CSS] css背景 出现的问题

[复制链接]
发表于 2015-3-18 16:24:07 | 显示全部楼层 |阅读模式
问题是这样的,现在要设置一个背景,背景是不随着上下滚动变化而变化,可是当对背景定位的时候出现了点小问题。如果背景图像设置为剧中的时候,问题如下所属

正常情况下是这样的:

 提示:您可以先修改部分代码再运行



1:当background-position:center 出现问题如下:

 提示:您可以先修改部分代码再运行



2:好吧,继续进行,再次修改 background-position:center 5% 正常
如果改成background-position: 50% center  那么就不正常了,难道说,Y轴定位遇到 background-attachment:fixed; 时候不行吗?
发表于 2015-3-19 08:53:15 | 显示全部楼层
fixed
This keyword means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a ‘fixed’ background doesn't move with the element.
当 background-attachment 的值为 fixed 的时候,表示背景是固定于 viewport(视区) 的。在桌面浏览器中,viewport 的宽和高可以理解为 html 或者 body 的宽和高(看你 CSS 中如何定义)。移动浏览器中对于 viewport 的解释较为复杂。

详情参见:
两个 viewport 的故事(第一部分)
两个 viewpor t的故事(第二部分)
CSS背景全攻略

另外,background-position 的两个值分别代表 X 轴 和 Y 轴,顺序不能搞错。如果只写一个值,则表示 X 轴 和 Y 轴的值相同。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-3-19 09:37:14 | 显示全部楼层
baihe107 发表于 2015-3-19 08:53
当 background-attachment 的值为 fixed 的时候,表示背景是固定于 viewport(视区) 的。在桌面浏览器中,vi ...

谢谢你的资料和帮助,既然背景background-attachment:为fixed的时候背景参照物已经不是父元素而是视窗(类似元素position:absolute)。那么background-attachment:为fixed的时候他的背景参照物永远都是视窗吗?还是和position:absolute一样当父元素设置为position:relative的时候以这个父元素为参照物。 我测试了下,并非我想想的那样,那么如果让背景元素垂直居中,该如何设置?
回复 支持 反对

使用道具 举报

发表于 2015-3-19 10:24:15 | 显示全部楼层
是参照视窗的。设置背景元素垂直居中:
  1. background-position-y: 50%
复制代码
水平和垂直都居中
  1. background-position: 50% 50%
复制代码


背景的 fixed 和元素的 position:fixed 是不同的概念。

我想楼主的意思是想让一个 div(有背景图片) 在页面里面固定,位置需要水平和垂直居中,且不随页面的滚动而滚动?

方案一:

 提示:您可以先修改部分代码再运行

方案二:

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-3-19 14:48:38 | 显示全部楼层
baihe107 发表于 2015-3-19 10:24
是参照视窗的。设置背景元素垂直居中:水平和垂直都居中

背景的 fixed 和元素的 position:fixed 是不同 ...

我要的效果是容器内背景图片水平和垂直居中并且固定(fixed)。但是父框必须非fixed。就这么简单。
回复 支持 反对

使用道具 举报

发表于 2015-3-19 15:26:23 | 显示全部楼层
这样的话容器还是用 iframe 吧,在 iframe  里面 fixed。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-3-19 17:22:02 | 显示全部楼层
baihe107 发表于 2015-3-19 15:26
这样的话容器还是用 iframe 吧,在 iframe  里面 fixed。

也是,这也是一种方法。谢谢了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-1-20 06:13 , Processed in 0.068220 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表