`
ningzhisheng
  • 浏览: 12253 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS教程12 CSS的Background Images 背景图片

阅读更多
背景图片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)
分享到:
评论

相关推荐

    css代码添加背景图片常用代码

    ### CSS 添加背景图片常用代码详解 #### 一、颜色设置:`background-color` **语法**: ```css {background-color: 颜色值;} ``` **说明**: 通过此属性可以为元素设置背景颜色。颜色值可以是预定义的颜色名称、...

    css背景颜色透明背景图片切换效果

    在提供的压缩包文件中,可能包含了HTML(index2.html、index3.html、index.html)、CSS(css目录)、图片(images目录)和JavaScript(js目录)文件,用于实现上述的背景颜色透明和图片切换效果。通过分析这些文件,...

    css3半透明遮罩背景lightbox图片展示特效

    在“css3半透明遮罩背景lightbox图片展示特效”中,我们主要关注的是如何使用CSS3来创建具有半透明遮罩和动态效果的图片展示组件,通常被称为Lightbox。Lightbox是一种流行的设计模式,当用户点击图片预览链接时,会...

    IE下background背景图片无法显示问题解决方法

    在做下拉框select的时候用一个箭头符号,作为下拉框的三角,在firefox和chrome下均可以正常显示,但是在IE下无法显示。 查找了很久,发现是图片格式问题,把png格式的... background:url(images/arrow.gif) no-repeat 1

    CSS3 iPhoneX手机屏幕背景和页面背景图片同时切换特效

    4. **背景图像(Background Images)**:CSS3支持多个背景图像,这使得同时切换两个背景图片成为可能。通过设置`background-image`和`background-size`属性,可以实现图片的布局和缩放。 5. **媒体查询(Media ...

    纯css动感背景滑动的导航菜单特效代码

    2. CSS的`background-image`、`background-size`和`background-position`属性用于设置和控制背景图片。 3. `transition`属性用于实现背景滑动的过渡效果。 4. 使用`:hover`伪类触发背景位置的变化。 5. 其他CSS样式...

    花纹背景css整站模板

    3. **图片资源**:花纹背景通常需要图像文件来实现,这些可能位于一个单独的`images`文件夹中,包含PNG、JPEG或SVG格式的图片。 4. **JavaScript文件**:为了增强交互性,模板可能包含JavaScript或jQuery代码,用于...

    CSS给文字链接加个漂亮的背景

    通过以上分析,我们可以看出这段代码的主要目的是展示如何使用CSS来美化文本链接,包括为其添加背景图片以及实现鼠标悬停时背景的变化效果。这种方法可以极大地提升网站的视觉体验,使得普通的文本链接变得更加吸引...

    CSS3 transform图片飞入动画特效

    HTML文件中,图片通常作为背景图像(background-image)或者内联图像(标签)存在,并通过CSS类控制其动画状态。 实现这种动画特效时,还需要考虑浏览器兼容性。虽然大部分现代浏览器都支持CSS3的transform和...

    CSS教程(四)背景、边框属性 (2).docx

    2. **背景图片属性(background-image)**:通过`background-image`属性可以添加背景图片,如`background-image: url(../images/css_tutorials/background.jpg);`。在HTML中,通常使用`<body>`标签的`background`...

    CSS教程(四)背景、边框属性.docx

    2. **背景图片属性 (background-image)**:通过`background-image`,我们可以设置元素的背景图像,如`body {background-image: url(../images/css_tutorials/background.jpg);}`。默认情况下,图片会重复铺满整个...

    CSS 背景全攻略

    在CSS中,背景属性是网页设计中不可或缺的一部分,它能够为元素添加颜色、图像或两者组合,从而丰富页面的视觉效果。这篇“CSS背景全攻略”深入探讨了CSS背景属性的各个方面,包括基本用法、技巧以及CSS3的新特性。 ...

    CSS3实现图片全屏背景特效.zip

    7. **资源组织**:文件夹`css`包含了样式的CSS文件,`js`包含JavaScript代码,`images`则存放背景图片和其他图像资源。这种分门别类的组织方式有利于项目的管理和维护。 综上所述,这个压缩包提供了一个实践CSS3...

    CSS 控制首页背景

    `style`属性内的`BACKGROUND:url(/images/aoyunbg1.png)`指定了一个背景图片路径,`repeat-x`则表示背景图横向重复,而`50% top`设定了图片的初始位置为页面的正中央顶部。 紧接着的`<DIV>`标签中,通过`style=...

    css3一款鼠标移上图片高亮效果

    在CSS3中,实现鼠标移上图片高亮效果是一种常见的交互设计手法,它可以提升用户体验,使网站或应用更具吸引力。这个效果通常是通过结合使用CSS的选择器、伪类以及图像处理属性来实现的。下面我们将详细探讨如何利用...

    CSS背景属性[归类].pdf

    例如,下面的代码将背景图片定位到元素的右上角:body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-position:right top;} 演示示例<html> <head> ...

    Css做的超炫图片效果

    2、我们假设style.css文件中的图片格式为:background-image: url(/images/skin/01/big_bg.jpg); 二、基于以上条件,设置参数如下: 1、图片域名:http://www.bangso.com(最后不需要斜杠) 2、保存目录:存放下载后...

    background-images

    "background-images"这个主题涵盖了多种风格和颜色的背景图片资源,非常适合设计师们用于创作独特且引人入胜的设计作品。 首先,我们要理解“背景”在设计中的意义。背景是任何设计元素的基础,它为前景元素提供了...

Global site tag (gtag.js) - Google Analytics