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

  背景图片Background Images有许多属性可以操作。
  幸运的是,可以使用background处理所有:

 代码如下 复制代码
body {
    background: white url(/images/bg.gif) no-repeat top right;
}

  上面合并了下面属性:
  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)

时间: 2024-08-02 07:26:48

CSS教程 12、CSS的Background Images 背景图片的相关文章

css教程:关于CSS不透明的详细介绍

  近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器. 关于CSS 透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个标准属性.它是一种非标准技术,应该是CSS3规范的一部分. 1. 旧的Opacity设置 以下代码是Fire

CSS教程 2、CSS Selectors,Properties,an

CSS教程 2.CSS Selectors,Properties,and Values 选择器 .属性.值 [翻译Htmldog] HTML有标签,CSS有选择器.选择器是给内部和外部样式里面的样式命名. 每个选择器都有属性在{}里面,比如简单点像color,font-weight或background-color. 值在冒号(不是等号)后面,分号分离属性. body {    font-size: 0.8em;    color: navy;} 上面的意思是为body选择器设置font-siz

经典实用CSS教程详细讲解

css|教程 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一.使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量.尤其是当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐! 前言 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具

photoshop快速制作简约的双色调背景图片教程

给各位photoshop软件的使用者们来详细的解析分享一下快速制作简约的双色调背景图片的教程. 教程分享: 下面几张是我用几张普通的素材处理成双色调风格做的网页.         马上进入正题!咱们用第一张图片为例. 第一步: 打开Photoshop,新建文件.拉一个炫酷装逼的渐变色,角度如图,然后先吸好深色放在色板中备用.   <点图片看大图>www.16xx8.com 第二步: 选一个高品质的好图,最好主体物能够突出一些,方便分离双色调.然后在Photoshop中打开这张图片.   <

css教程:CSS背景background属性的应用

The CSS background properties define the background effects of an element. CSS的background属性可为元素定义背景效果. 设置背景颜色 Set the background color This example demonstrates how to set the background color for an element. 实例:  代码如下 复制代码 body {background-color: ye

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

  背景图片Background Images有许多属性可以操作. 幸运的是,可以使用background处理所有:   上面合并了下面属性:   可以为大部分html元素设置背景图片,不只是整个页面(body),可以用来制作简单但效果显著的美化,比如圆角等等不同的边角形状. 使用背影图片非常简单,而且可以使用在页面的任何地方.许多人喜欢使用色彩鲜艳的图片作为背景的页面,带给用户判读前台文字困难加大.这是一个极端的例子,但事实上,大部分对用户友好.可读性强的文本是白色背景上显示黑色,或是黑色背景

WEB标准教程:Div+CSS布局入门教程

css|web|web标准|教程|入门教程 在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图.

进阶教程:网页CSS样式表设计十条技巧

css|技巧|教程|设计|网页|样式表 1.CSS 字体简写规则 当使用css定义字体时你可能会这样做: font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-variant: small-caps; font-family: verdana,serif; 事实上你可以简写这些属性: font: 1em/1.5em bold italic small-caps verdana,serif 现

强烈推荐:非常不错的样式表CSS教程(4)

css|教程|样式表 ●Specificity 本节讲述的是用来判断样式优先权的是"specificity"."specificity"和选择符selector中元素的数目以及元素的属性有关,"specificity"高的优先应用. 怎样计算选择符的"specificity"值呢?涉及到三项内容: 1.选择符中ID标识符属性的数目A 注意:一个匹配ID的属性选择符不能算作一个ID,它仅能当作一个属性选择符.例如"id