文档章节

图解 CSS (4): background - 背景

涂孟超
 涂孟超
发布于 2014/09/26 15:34
字数 250
阅读 2
收藏 0
background
background-color
background-attachment
background-image
background-position
background-position-x
background-position-y
background-repeat

 
 
 
 
 

 

 

  

设置背景色(譬如红色): background-color: red; 或者 background: red;



背景图片: background-image: url(路径); 或者 background: url(路径);
其中的路径可以是相对或绝对路径, 可以带双引号或单引号.



background-repeat(背景图片反复方式): repeat(默认)、no-repeat、repeat-x、repeat-y.






background-position(背景图起始位置):
上中: top 或者 top center
上左: top left(默认)
上右: top right
中心: center 或者 center center
中左: left 或者 center left
中右: right 或者center right
下中: bottom 或者 bottom center
下左: bottom left
下右: bottom right
还可以用百分比或具体的数值描述: x% y% 或 xpos ypos













background-position 本来就是有 x、y 两个值构成的, 也可用
background-position-x 和 background-position-y 单独设定.

background-attachment(设置背景是否随滚动条滚动): scroll(默认)、fixed(不滚动).



用 background 可以同时设置:
background-color、background-attachment、background-image、background-position、background-repeat
竟没有顺序的要求, 也可随意省略, 只是 position 用两个值时不要分开即可.



本文转载自:http://www.cnblogs.com/del/archive/2009/01/28/1381229.html

共有 人打赏支持
涂孟超
粉丝 12
博文 2011
码字总数 14107
作品 0
深圳
程序员
css sprite 图片背景定位技术

加速的关键,不是降低重量,而是减少个数。如果重量在200K以内,只要网络不是特别慢,效率都差不多。但是,如果图片个数多一倍,效率将明显低一个档次。 传统切图讲究精细,图片规格越小越好...

xiahuawuyu
2012/05/15
0
0
图解CSS的padding,margin,border属性

图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的...

巴顿
2013/09/05
0
0
CSS3详解:background

CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强。 1、多个背景图片 在css3里面,你可以再一个标签元素里应用多个...

DanielYue
2016/07/14
0
0
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图

技术的新发展,除计算机可以接入互联网之外,平板电脑、智能手机、智能电视等其他设备均可访问互联网。在多设备时代,构建多屏体验也不是听说的那么难。 但是这也增加了学习CSS的难度?不知道...

woIwoI
2014/11/28
0
0
CSS定位元素--背景

CSS 里也一样,每个元素盒子都可以想象成由两个图层组成。元素的前景层包含内容(如文本或图片)和边框,元素的背景层可以用实色填充(使用background-color 属性),也可以包含任意多个背景...

风吹一米阳光
2015/09/22
56
0

没有更多内容

加载失败,请刷新页面

加载更多

java JDK动态代理

本篇随笔是对java动态代理中的JDK代理方式的具体实现。 首先需要定义一个接口,为其定义了两个方法:   public interface UserService { public void add(); public void delete(); } 然后需...

编程SHA
24分钟前
2
0
轻松理解Dubbo分布式服务框架

Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案。简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需要用的...

别打我会飞
32分钟前
2
0
TypeScript基础入门之JSX(一)

转发 TypeScript基础入门之JSX(一) 介绍 JSX是一种可嵌入的类似XML的语法。 它旨在转换为有效的JavaScript,尽管该转换的语义是特定于实现的。 JSX在React框架中越来越受欢迎,但此后也看到了...

durban
57分钟前
1
0
JavaScript使用原型判断对象类型

1. constructor属性 在JavaScript创建对象(二)——构造函数模式中,我们说过可以使用对象的constructor属性判断对象的类型:p1.constructor === Person,可能当时就有细心的读者会想,我们...

Bob2100
58分钟前
1
0
10-《深度拆解JVM》JVM是怎么实现invokedynamic的?(下)

一、问题引入 上回讲到,为了让所有的动物都能参加赛马,Java 7 引入了 invokedynamic 机制,允许调用任意类的“赛跑”方法。不过,我们并没有讲解 invokedynamic,而是深入地探讨了它所依赖...

飞鱼说编程
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部