收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 3862|回复: 13

[讨论] 居然可以同时以图片和颜色为背景

[复制链接]
发表于 2007-3-9 14:24:49 | 显示全部楼层 |阅读模式
有时候做颜色渐变的背景,就要用到两个div,外边的div以某颜色填充背景,里边的div以渐变的图片为背景,这样就可以既兼顾了背景图片的尺寸,又不用担心内容过多超出背景图片高度了。

今天尝试了将两个背景写在一起,居然可行!



  1. body { background:url(../images/bg.gif) repeat-x; }
  2. body { background-color:#CEDFE7; }
复制代码


我在ie和ff下测试都正常。

效果是达到了,但还是有些疑问的,为什么一定要分两行来写呢?而且得保持先后顺序不变。
发表于 2007-3-9 14:38:42 | 显示全部楼层
第一行的background其实分解开是
background-image: url(../images/bg.gif);
background-repeat: repeat-x;

和第2行的background-color没影响
回复 支持 反对

使用道具 举报

发表于 2007-3-9 18:00:10 | 显示全部楼层
1。首先 CSS 中是可以同时使用并推荐同时使用背景颜色和背景图的,因为图片可能由于客户端浏览器的设置而被关闭,这样设置一个接近的背景色会稍微“保险”一点。

2。background 本身是一个集合属性,它同时包括了 background-color, background-image, background-repeat, background-attachment, background-position 这几个信息,这些信息如果不写,就取默认值。
你第一行虽然只写了 url 和 repeat-x,但浏览器解析起来是这样的:
background:transparent url(../images/bg.gif) repeat-x scroll 0% 0%;

所以如果你先单独定义了 background-color,那么后面的 background 就会以 transparent 这个 background-color 的默认值覆盖掉前面的声明。所以顺序是不能换的。

3。你的代码其实可以综合起来写成这样:
background:#CEDFE7 url(../images/bg.gif) repeat-x;

评分

参与人数 1威望 +1 收起 理由
小毅 + 1 我很赞同

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2007-3-9 20:31:23 | 显示全部楼层
顶楼上的
回复 支持 反对

使用道具 举报

发表于 2007-3-9 22:06:14 | 显示全部楼层
老九强的.
回复 支持 反对

使用道具 举报

发表于 2007-3-9 22:22:48 | 显示全部楼层
郁闷,怎么这个人所共知的小知识点也加 威望??郁闷啊,要知道的话,我还不如我发呢,
回复 支持 反对

使用道具 举报

发表于 2007-3-9 23:22:30 | 显示全部楼层
楼上的态度就不对,别人写的书,知识你都懂,那是不是就等于你也可以出书呢。
回复 支持 反对

使用道具 举报

发表于 2007-3-9 23:28:50 | 显示全部楼层
我汗 火星人啊
回复 支持 反对

使用道具 举报

发表于 2007-3-10 15:49:02 | 显示全部楼层
这个的确比较简单
不过很多人不知道 写出来鼓励别人看还是不错

background 非常强悍的.

后面可以跟一大排 比如20px 30px;
        background:#fff url(Images/Bg.gif) repeat-x top;
回复 支持 反对

使用道具 举报

发表于 2007-3-12 19:54:08 | 显示全部楼层
对于我这样的新人来说还是很有用的
回复 支持 反对

使用道具 举报

发表于 2007-3-12 20:15:03 | 显示全部楼层
那我这个用CSS定义图片背景,用JS切换背景颜色又怎么理解呢?(限IE)
说明:图标是背景,标题栏是JS切换颜色
地址是:http://www.cn122.net/bbs/dislist.asp?boardid=32
回复 支持 反对

使用道具 举报

发表于 2007-3-12 21:08:29 | 显示全部楼层
原帖由 [i]yougucaofan 于 2007-3-9 22:22 发表
郁闷,怎么这个人所共知的小知识点也加 威望??郁闷啊,要知道的话,我还不如我发呢,




晨飞,你这就错了,不是你发就给你加威望,这的确是很简单的一个知识,但是如果没人整理出来会让更多的人失去这个得到这个知识的机会。当然只是简单一写那也没用,主要是在于你是否用心整理了。老九是养成了这样的习惯把自己的知识整理好后再共享出来。这对于大家来说是件好事也是需要鼓励的。这也是我们打分加威望的标准。所以希望晨飞你也能把你的知识进行整理共享出来。

当然我敢保证老九还并没有为了这点威望,为了这打分才来发这个知识,他只不过是为了帮助更多的朋友得到这个知识。我们大家都要养成这种共享的好习惯。

“我所得到的,不过是从别人处得来!”

[[i] 本帖最后由 小毅 于 2007-3-12 21:10 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-3-12 22:55:05 | 显示全部楼层
呵呵,不好意思啊,我也不是说这几个威望分的事,只是看别人得的时候都是写不少的知识点,虽然有的也常见得,但是数量的问题。这个,我当时看了感觉有点奇怪,这么一个小知识点也可以加分,呵呵,我没有吵笑九哥的意思。
有的人对这个知识点也许需要。我当时想的太少了,呵呵。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-3-13 14:31:28 | 显示全部楼层
谢谢九哥,长知识了。
回复 支持 反对

使用道具 举报

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

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2020-2-22 04:40 , Processed in 0.109098 second(s), 12 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

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