background-image属性的设置
对于图片,首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样,那么就从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
background-image属性的设置的更多相关文章
- background复合属性详解(上):background-image
background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...
- background系列属性
1.background-color背景颜色属性 ①颜色表示方法 英语单词:red blue purple skyblue. rgb:r代表红色 g代表绿色 b代表蓝色 也 ...
- [CSS] css的background及多背景设置
问题 首先是一个 div 块里需要一张背景,带文本和图案的那种,但是身为容器的 div 是能够随数据的改变而变化长度的,所以一张静态图片不免的会有拉伸和挤扁的状态,尤其是有图案和文本的情况下最为明显 ...
- 背水一战 Windows 10 (67) - 控件(控件基类): DependencyObject - CoreDispatcher, 依赖属性的设置与获取, 依赖属性的变化回调
[源码下载] 背水一战 Windows 10 (67) - 控件(控件基类): DependencyObject - CoreDispatcher, 依赖属性的设置与获取, 依赖属性的变化回调 作者: ...
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
- CSS探案之 background背景属性剖析
首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...
- 控制类名(className 属性)设置或返回class属性
控制类名(className 属性) className 属性设置或返回元素的class 属性. 语法: object.className = classname 作用: 1.获取元素的class 属 ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- 配置错误 在唯一密钥属性“fileExtension”设置为“.log”时,无法添加类型为“mimeMap”的重复集合项
错误提示: 配置错误 在唯一密钥属性“fileExtension”设置为“.log”时,无法添加类型为“mimeMap”的重复集合项 配置文件 \\?\D:\www\abc\web.config 出现 ...
- 问题.NET--win7 IIS唯一密钥属性“VALUE”设置为“DEFAULT.ASPX”时,无法添加类型为“add”的重复集合
问题现象:.NET--win7 IIS唯一密钥属性“VALUE”设置为“DEFAULT.ASPX”时,无法添加类型为“add”的重复集合 问题处理: 内容摘要: HTTP 错误 500.19 - ...
随机推荐
- WM_COMMAND 和 WM_NOTIFY 的区别
当我们按下一个菜单选项,或者一个控件需要通知父窗口一个事件发生(如鼠标单击.双击等),或者快捷键被按下时,Windows将会发送一个 WM_COMMAND 消息给父窗口.那么 WM_COMMAND 消 ...
- Java-Maven-Runoob:Maven 自动化构建
ylbtech-Java-Maven-Runoob:Maven 自动化构建 1.返回顶部 1. 自动化构建定义了这样一种场景: 在一个项目成功构建完成后,其相关的依赖工程即开始构建,这样可以保证其依赖 ...
- 1117 Eddington Number
题意:给出了N个数字,确定一个尽可能大的数字E,要求这N个数字中大于E的数字有E个. 思路: 乍一看不知道题目在说啥.静下心来多读几遍题目,在草稿纸上比划比划,发现是个大水题.解释一下样例,原始序列为 ...
- 实例甜点 Unreal Engine 4迷你教程(3)之用C++改变Image小部件的其它属性
完成本迷你教程之前,请前往完成以下迷你教程: ·实例甜点 Unreal Engine 4迷你教程(2)之用C++改变Image小部件的颜色: 在上一次的迷你教程的LearnWidgets工程上进行(如 ...
- Linux的启动级别
一.启动级别 1.查看linux 系统默认启动级别cat /etc/inittab id:3:initdefault: ##可以看出默认为三 2.查看某一服务在各个启动级别上是否启动[root@loc ...
- call()和apply()的认知
apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性. Function.apply(obj,args)方法能接收两个参数 obj:这个对象将代替Function类里this对象 arg ...
- AUC ROC PR曲线
ROC曲线: 横轴:假阳性率 代表将负例错分为正例的概率 纵轴:真阳性率 代表能将正例分对的概率 AUC是ROC曲线下面区域得面积. 与召回率对比: AUC意义: 任取一对(正.负)样本,把正样本预测 ...
- leetcode700
class Solution { public: TreeNode* searchBST(TreeNode* root, int val) { if (root == NULL) { return n ...
- 系统环境变量PATH被删除后从注册表恢复
转自:https://wenku.baidu.com/view/75d0b6ec19e8b8f67c1cb958.html 首先需要了解path这个环境变量有什么用: 当你打开命令提示窗口时,即win ...
- Spring Cloud Eureka 2 (Eureka Server搭建服务注册中心)
工具:IntelliJ IDEA 2017.1.2 x64.maven3.3.9 打开IDE file===>new===>project next next 选择相应的依赖 next ...