文档章节

html中background-image属性的设置

慕广陵
 慕广陵
发布于 2012/11/29 10:28
字数 1517
阅读 174
收藏 2

对于图片,首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样,那么就从CSS控制背景图片讲起吧。
1.CSS控制背景图片:
    对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背景色就可以了,原因吗,我想也很简单,因为它与前景音乐一样,对于网页的打开,速度会有一定的影响。不过对于一般的个人网站,或者个人博客而言,它对展现自己的个性,当然是不可或缺的了,当然什么都不会太过完美,有好就有坏,也就是当图像不可用但CSS可用的时候,替换内容就不会显示出来,因此,并不建议在导航按钮文本或类似的情况中使用CSS背景图片。
    控制背景图片的CSS属性有很多,只要与图片的相关的,大多都会用的上。

(1)、背景图片的导入:
    当然大家最熟悉的当然是background与background-image了。
   为网页设计背景图片的代码是:
body {background:url("d:\images\04.jpg")}
或者
body {background-image:url("d:\images\04.jpg")}
    这样的话,我们就能将想要作背景的图片导进网页里了。

(2)、背景图片的显示方式:
    当然,只用上面的代码,是无法表达出自己想要的效果的。因为,图片小了,就会以平铺的方式,如果是大了,为显示它,就是会出现滚动条,这样多不好。因此,我们还得多其进行显示控制,也就是要用到background-repeat,
它是取值:
repeat :      默认值。背景图像在纵向和横向上平铺
no-repeat :   背景图像不平铺
repeat-x :    背景图像仅在横向上平铺
repeat-y :    背景图像仅在纵向上平铺
而代码,我想只要懂一点CSS的都知道,如下:
body {background:url("d:\images\04.jpg");background-repeat:no-repeat}
    这样的话,它就是以原图像大小显示了。

(3)、背景图片的大小控制:
    不过问题是,倘若图片过大了,又怎么办呢?对于一个好网页来说,最好不要用太大的图片,原因上面也说过了,影响打开网页的速度。我们最好还是用PS或者FireWorks处理一下。不过既然我提到了,我们也不防用CSS来实现图片大小的控制。
    我想很多人会自然而然的用上如下代码:
<style type="text/css">
body{background-image:url("d:\images\04.jpg");width:350px;height:350px;}
</style>
    呵呵,想法是好的,但你所用的浏览器支持吗?我想IE或者FF一定会当作没看见吧。也许你会问,我曾经设计论坛风格时,是可以实现的啊?我想,如果只是上面的代码的话,那是不可控制图片的,因为它只是控制BODY的大小。当然,这里也是控制不了的。如果是其它的ID标记,我想是可以控制记标记的范围大小,呵呵,当然也就不是图像的大小了。
    说实话,这个问题不仅困扰着你们,同时也困扰着我。因为它只是一个属性的值,而不是一个真正的对像。呵想到了用CSS控制的话,记得告诉我哦。

    补充:W3C于9月10发布了一篇名为《CSS Backgrounds and Borders Module Level 3》的应文章,里面为CSS的背景加上了几个我们从未见的属性:
background-clip   :
background-origin   :
background-size   :背景尺寸。
background-break   :
    虽然是有了这些属性,不过现在还没有支持它们的浏览器。真是好苦恼啊。
   
(4)、背景图片的位置控制:
    背景图片,我科是导进来了,但是它的位置真有一点无法让人接受。因为它默认的是左上对齐。但是我们却不想这样子放置,那我们又该怎么办呢。不要着急,激动人心的时刻马上到来,现在,让我们来认识一下background-position、background-position-x及background-position-y吧。
    a.基本语法:
background-position : length   || length
background-position : position || position
background-position-x : length | left | center | right
background-position-y : length | top  | center | bottom

    b.语法取值:
length :百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right

    c.示例:
body { background-image: url("d:\images\04.jpg"); background-position: 50% 50%; background-repeat:no-repeat; }
body { background-image: url("d:\images\04.jpg"); background-position-x: 50%; background-repeat:no-repeat; }
body { background-image: url("d:\images\04.jpg"); background-position-y: 50%; background-repeat:no-repeat; }
    对于取值为length | top | center | bottom我只写下面三个例子。
body { background-image: url("d:\images\04.jpg"); background-position: top right; background-repeat:no-repeat; }
body { background-image: url("d:\images\04.jpg"); background-position: 50% center; background-repeat:no-repeat; }
body { background-image: url("d:\images\04.jpg"); background-position: 60px center; background-repeat:no-repeat; }
    说了这么多例子,我想你对于定位,有一定的了解了吧。

(5)、背景图片的透明设置:
    有的时候,我们总想着去将图片设置成透明的。

(6)、多幅背景图片的设置:
    对于多幅背景图片的设置,我是在《超越CSS:WEB设计艺术精髓》里看到的。不过,却又让我很遗憾,因为,目前支持一个标签内有多幅背景图片的浏览器太小了,我知道的也只有Apple Safari 。以许你会问,这怎么可能。当你看完这个实例之后,我想你会惊讶,“天啊,CSS3之前都只能给每个元素使用一幅图片。”如果想研究一下的话,就快快安装一个SAFARI浏览器吧。对我而言,我相信,这是发展的趋势。总之一句话,谁解释CSS能力越强,它就将是发展的潮流,谁俱有完美的WEB准标,谁就是明日浏览器之星。
    代码如下:
body {
background-image:
url("d:\mypic\001.png"),
url("d:\mypic\002.png");
url("d:\mypic\003.png");
url("d:\mypic\004.png");
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-x,
repeat-y,
repeat-x,
repeat-y,
background-position:
top left,
top right,
bottom right,
bottom left,
top left,
top right,
bottom right,
bottom left;}

 原文在 这里
 




本文转载自:http://blog.sina.com.cn/s/blog_631611220100j1j5.html

慕广陵
粉丝 7
博文 8
码字总数 1543
作品 0
海淀
程序员
私信 提问
【CSS】背景基础知识

92038-106.jpg 添加背景图 用 background-image 属性,在元素的背景中添加图形。 background-image属性有一个值:url,后面跟着放在括号里的图形文件路径。 路劲可以是绝对url,也可以是相对...

KelvinZ
2017/11/27
0
0
html5的video的封面poster图片填充

html5支持视频播放,而且趋势,facebook也全面切换到html5了,最近做一个简单的视频播放器,测试了好多jplayer,video.js之类的都觉得不太好,所以自己写一个最简单的,不过发现了一个问题,...

豆花饭烧土豆
2016/10/20
2.3K
0
Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观的多样性。作一个形象的比喻:对于一个...

爱吃西瓜的番茄酱
2017/11/01
0
0
论:img和background-image的各种区别

background-image是背景图片,是css的一个样式 <img />是一个块状元素,它是一个图片,是html的一个标签 background-image是只能看的 <img />是一个document对象,它是可以操作的。比如更换i...

_大雁
2013/06/13
5.7K
0
Java程序员从笨鸟到菜鸟之(十六)CSS基础积累总结(上)

一:CSS的工作原理 1.基本的CSS语法 比方说,我们要用红色作为网页的背景色: 用HTML的话,我们可以这样: 用CSS的话,我们可以这样获得同样的效果: body {background-color: #FF0000;} 上例...

长平狐
2012/11/12
77
0

没有更多内容

加载失败,请刷新页面

加载更多

Java描述设计模式(11):观察者模式

本文源码:GitHub·点这里 || GitEE·点这里 一、观察者模式 1、概念描述 观察者模式是对象的行为模式,又叫发布-订阅(Publish/Subscribe)模式。观察者模式定义了一种一对多的依赖关系,让多...

知了一笑
37分钟前
5
0
Qt 之 模态、非模态、半模态窗口的介绍及 实现QDialog的exec()方法

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/GoForwardToStep/article/details/53667566 一、简述 先简...

shzwork
40分钟前
4
0
OSChina 周一乱弹 —— 产品经理和程序员是夫妻?

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《Ocean Eyes》- Billie Eilish 《Ocean Eyes》- Billie Eilish 手机党少年们想听歌,请使劲儿戳(这里) @夏目Jane :风太大。...

小小编辑
今天
338
7
使用CSS自定义属性构建骨架屏

写在前面 几天前看到薄荷前端团队分享的《前端骨架屏方案小结》,突然回想起一年前看到的max bock写的《Building Skeleton Screens with CSS Custom Properties》,翻译整理写下出此文,分享...

前端老手
昨天
17
0
Docker常用命令小记

除了基本的<font color="blue">docker pull</font>、<font color="blue">docker image</font>、<font color="blue">docker ps</font>,还有一些命令及参数也很重要,在此记录下来避免遗忘。 ......

程序员欣宸
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部