背景图片Background Images有许多属性可以操作。
幸运的是,可以使用background处理所有:
Example Source Code [www.52css.com]
body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}
上面合并了下面属性:
Example Source Code [www.52css.com]
background-color出现在前面。
background-image图片的位置。
background-repeat图片重复的形式。背景图片可以重复repeat(这就像建筑用的瓦片一样),repeat-x在x轴(左右)重复,repeat-y在y轴(上下)重复,no-repeat不重复只显示一个。
background-position可以使用top,center,bottom,left,right或任何可以看到的组合,比如above在上面。
可以为大部分html元素设置背景图片,不只是整个页面(body),可以用来制作简单但效果显著的美化,比如圆角等等不同的边角形状。
使用背影图片非常简单,而且可以使用在页面的任何地方。许多人喜欢使用色彩鲜艳的图片作为背景的页面,带给用户判读前台文字困难加大。这是一个极端的例子,但事实上,大部分对用户友好、可读性强的文本是白色背景上显示黑色,或是黑色背景显示白色(建议使用柔和的颜色做为背景,减少刺眼的颜色)
所以,最佳使用背景图片的位置要么是上面没有内容要么是背景非常淡,这样同样有利于减少图片大小,因为使用更少的颜色。(建议使用索引色格式,比如GIF)
幸运的是,可以使用background处理所有:
Example Source Code [www.52css.com]
body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}
上面合并了下面属性:
Example Source Code [www.52css.com]
background-color出现在前面。
background-image图片的位置。
background-repeat图片重复的形式。背景图片可以重复repeat(这就像建筑用的瓦片一样),repeat-x在x轴(左右)重复,repeat-y在y轴(上下)重复,no-repeat不重复只显示一个。
background-position可以使用top,center,bottom,left,right或任何可以看到的组合,比如above在上面。
可以为大部分html元素设置背景图片,不只是整个页面(body),可以用来制作简单但效果显著的美化,比如圆角等等不同的边角形状。
使用背影图片非常简单,而且可以使用在页面的任何地方。许多人喜欢使用色彩鲜艳的图片作为背景的页面,带给用户判读前台文字困难加大。这是一个极端的例子,但事实上,大部分对用户友好、可读性强的文本是白色背景上显示黑色,或是黑色背景显示白色(建议使用柔和的颜色做为背景,减少刺眼的颜色)
所以,最佳使用背景图片的位置要么是上面没有内容要么是背景非常淡,这样同样有利于减少图片大小,因为使用更少的颜色。(建议使用索引色格式,比如GIF)
发表评论
-
CSS教程17 CSS的优先级特性Specificity
2010-07-22 12:00 743如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规 ... -
CSS教程16 CSS的伪元素Pseudo Elements
2010-07-22 11:59 684伪元素吸附在选择上和pseudo classes伪类很像,像这 ... -
CSS教程15 CSS的At-Rules@规则
2010-07-22 11:58 722At-rules分装不同的CSS规 ... -
CSS教程14 CSS网页布局Page Layout
2010-07-22 11:57 834使用CSS布局非常简单,如果你习惯使用tables布局,可能开 ... -
CSS教程13 CSS的display属性
2010-07-22 11:56 756操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式 ... -
CSS教程11 CSS的属性缩写
2010-07-22 11:55 658一些CSS属性允许使用一串值代替许多属性,值使用空格分开。 ... -
CSS教程10 CSS的Pseudo Classes 伪类
2010-07-22 11:54 608请你注意一些CSS伪类属性不被所有浏览器支持,但有四个伪类可以 ... -
CSS教程9 CSS的Grouping and Nesting分组和嵌套
2010-07-22 11:53 464Grouping 分组 当许多选择器有同样属性时,可以使 ... -
CSS教程8 CSS的Class以及ID选择器
2010-07-22 11:52 668前面的学习我们仅仅使用HTML选择器(在HTML页面里为htm ... -
CSS教程7 CSS属性结合起来使用
2010-07-22 11:51 716如果你学完HTML初级教程即可学习CSS初级教程,使用CSS处 ... -
CSS教程6 CSS的Border边框
2010-07-22 11:48 624CSS Borders 边框 边框可以运用到body里的 ... -
CSS教程5 Margin和Padding
2010-07-22 11:45 617margin和padding用来隔开元素,margin是隔开元 ... -
CSS教程4 CSS的Text 文本
2010-07-22 11:44 711有一系列属性可以改变网页文字的大小和形状,概要如下: fon ... -
CSS教程3 CSS的color颜色
2010-07-22 11:43 1080css可以处理16,777,216颜色,可以使用名字、rgb ... -
CSS教程2 选择器 、属性、值
2010-07-22 11:41 727HTML有标签,CSS有选择器。选择器是给内部和外部样式里面的 ... -
CSS教程1CSS的应用
2010-07-22 11:37 682CSS教程 1、CSS的应用 一、In-line 行内 ...
相关推荐
### CSS 添加背景图片常用代码详解 #### 一、颜色设置:`background-color` **语法**: ```css {background-color: 颜色值;} ``` **说明**: 通过此属性可以为元素设置背景颜色。颜色值可以是预定义的颜色名称、...
在提供的压缩包文件中,可能包含了HTML(index2.html、index3.html、index.html)、CSS(css目录)、图片(images目录)和JavaScript(js目录)文件,用于实现上述的背景颜色透明和图片切换效果。通过分析这些文件,...
在“css3半透明遮罩背景lightbox图片展示特效”中,我们主要关注的是如何使用CSS3来创建具有半透明遮罩和动态效果的图片展示组件,通常被称为Lightbox。Lightbox是一种流行的设计模式,当用户点击图片预览链接时,会...
在做下拉框select的时候用一个箭头符号,作为下拉框的三角,在firefox和chrome下均可以正常显示,但是在IE下无法显示。 查找了很久,发现是图片格式问题,把png格式的... background:url(images/arrow.gif) no-repeat 1
4. **背景图像(Background Images)**:CSS3支持多个背景图像,这使得同时切换两个背景图片成为可能。通过设置`background-image`和`background-size`属性,可以实现图片的布局和缩放。 5. **媒体查询(Media ...
2. CSS的`background-image`、`background-size`和`background-position`属性用于设置和控制背景图片。 3. `transition`属性用于实现背景滑动的过渡效果。 4. 使用`:hover`伪类触发背景位置的变化。 5. 其他CSS样式...
3. **图片资源**:花纹背景通常需要图像文件来实现,这些可能位于一个单独的`images`文件夹中,包含PNG、JPEG或SVG格式的图片。 4. **JavaScript文件**:为了增强交互性,模板可能包含JavaScript或jQuery代码,用于...
通过以上分析,我们可以看出这段代码的主要目的是展示如何使用CSS来美化文本链接,包括为其添加背景图片以及实现鼠标悬停时背景的变化效果。这种方法可以极大地提升网站的视觉体验,使得普通的文本链接变得更加吸引...
HTML文件中,图片通常作为背景图像(background-image)或者内联图像(标签)存在,并通过CSS类控制其动画状态。 实现这种动画特效时,还需要考虑浏览器兼容性。虽然大部分现代浏览器都支持CSS3的transform和...
2. **背景图片属性(background-image)**:通过`background-image`属性可以添加背景图片,如`background-image: url(../images/css_tutorials/background.jpg);`。在HTML中,通常使用`<body>`标签的`background`...
2. **背景图片属性 (background-image)**:通过`background-image`,我们可以设置元素的背景图像,如`body {background-image: url(../images/css_tutorials/background.jpg);}`。默认情况下,图片会重复铺满整个...
在CSS中,背景属性是网页设计中不可或缺的一部分,它能够为元素添加颜色、图像或两者组合,从而丰富页面的视觉效果。这篇“CSS背景全攻略”深入探讨了CSS背景属性的各个方面,包括基本用法、技巧以及CSS3的新特性。 ...
7. **资源组织**:文件夹`css`包含了样式的CSS文件,`js`包含JavaScript代码,`images`则存放背景图片和其他图像资源。这种分门别类的组织方式有利于项目的管理和维护。 综上所述,这个压缩包提供了一个实践CSS3...
`style`属性内的`BACKGROUND:url(/images/aoyunbg1.png)`指定了一个背景图片路径,`repeat-x`则表示背景图横向重复,而`50% top`设定了图片的初始位置为页面的正中央顶部。 紧接着的`<DIV>`标签中,通过`style=...
在CSS3中,实现鼠标移上图片高亮效果是一种常见的交互设计手法,它可以提升用户体验,使网站或应用更具吸引力。这个效果通常是通过结合使用CSS的选择器、伪类以及图像处理属性来实现的。下面我们将详细探讨如何利用...
例如,下面的代码将背景图片定位到元素的右上角:body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-position:right top;} 演示示例<html> <head> ...
2、我们假设style.css文件中的图片格式为:background-image: url(/images/skin/01/big_bg.jpg); 二、基于以上条件,设置参数如下: 1、图片域名:http://www.bangso.com(最后不需要斜杠) 2、保存目录:存放下载后...
"background-images"这个主题涵盖了多种风格和颜色的背景图片资源,非常适合设计师们用于创作独特且引人入胜的设计作品。 首先,我们要理解“背景”在设计中的意义。背景是任何设计元素的基础,它为前景元素提供了...