background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本的情况是指定一张图片的url作为背景: <style> .parent{ height:200px; width:500px; border: 10px solid rgb(125, 125, 123); background-color: #bff; background-image:url(h

1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小/行高 字体样式 字体大小和样式不可省略 2 行内块的间距问题 行内块元素相邻时,行内块元素之间会有几像素的间距,只有通过浮动解决. 3 行内元素的margin 行内元素的上下外边距不起作用,左右起作用. 4 清除浮动 给父盒子设置一个高度     Clear: both      Overflow

# 复合属性也称为 "shortcut" property (快捷属性),它作用是为了简化代码,提高页面运行的效率. # 下面的内容会介绍 2 个比较常用的复合属性 "font" 和 "background" . ========================================================== 1. 背景-background ==========================================

css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat center;/*不重复背景图片中间显示*/background:url(背景图片路径)  no-repeat bottom center;/*不重复背景图片底部中间显示*/background:url(背景图片路径)  no-repeat right top;/*不重复背景图片右上方显示*/ba

1.background-color背景颜色属性 ①颜色表示方法 英语单词:red   blue   purple    skyblue. rgb:r代表红色   g代表绿色   b代表蓝色    也就是颜色的三原色. 十六进制:#0xff ff ff 2.background-image属性 background-image:url(images/i.jpg);背景天生是会被平铺满的. 3.background-repeat属性 background-repeat:no-repeat;控制ba

前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px "Times New Roman","Microsoft YaHei","SimSun"; 等价于三行语句: font-size:14px; line-height:24px; font-family:"Times New Roman",&

首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害怕用背景图,感觉很繁琐,什么 尺寸啊,位置啊,是否重复啊等等,听着头都大,所以就一直没有去好好地学习一下它,每次碰见就劝自己“下次再 看吧”,然而“明日复明日,明日何其多”,干脆就解决了它   background是css背景属性的简写,例如这样:background: #00FF00 url(bg

复合属性名称用于属性已经存在实例的时候, 可以对该实例注入属性 但是前提是该属性不能为null, 否则会抛出NullPointerException异常 boss.java package test_one; public class boss { private String name; private no no_one=new no(); //已实例化的情况可以对no_one实例的属性注入. no_one非实例化情况会报错 public String getName() { return

background:url("http://..../xxx.jpg") no-repeat center/cover; 这种复合形式在有些低端安卓浏览器中不支持,最好分开写: background-image:url("http://..../xxx.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover;

本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍contain.cover) 5.background-origin属性值(borde-box.padding-box.content-box) 6.多背景图片示例  背景图片定位(background-position)原理 A. 语法:Background-position:水平位置 垂直位置 B.

一.背景属性 1.1.背景颜色background-color <style> /*浮动,横向排列*/ div{float: left;} /*background-color属性值支持三种形式: name - 指定颜色的名称,如 "red" : RGB - 指定 RGB 值, 如 "rgb(255,0,0)" : Hex - 指定16进制值, 如 "#ff0000".*/ .one{ width: 100px; height: 10

background-origin: 规定 background-position 属性相对于容器的哪一部分来定位. padding-box 背景图像相对于内边距框来定位:(默认) border-box背景图像相对于边框盒来定位: content-box背景图像相对于内容框来定位. background-position:设置背景图像在容器显示的起始位置. 默认值:0 0(从背景图的左上点开始显示): 取值:Int px  Int px;背景图的左上定点在容器的坐标位置,可以为负值.负值表示背景

前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background-origin与background-clip的区别尚不清楚.就google了一篇,发现不错,翻译下来吧. 原文连接 : The New Background Position in CSS3 Say Hello to Background-Origin and Background-Clip, C

background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(content) 4部分组成,不过这只是从2D的视角来看盒模型的组成,而今天笔者将阐述如何从3D的视角看待盒模型的组成. 从2D视角看盒模型示意图: 从3D视角看盒模型示意图: 从3D视角看盒模型可以发现多了两个属性:background-image和background-color,而这两个属性都可

CSS 参考手册 实例 在一个声明中设置所有字体属性: p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/20px arial,sans-serif; } 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera           所有浏览器都支持 font 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit&quo

background-image:url('图片位置');//设置背景图片的位置 background-repeat:no-repeat;//图片是否重复显示(不重复) background-position: x% y%;图片的起始位置(如果图片是需要重复显示):如果不需要重复显示可以通过该项设置图片的位置 background-size: size1 size2;//图片的大小 比如要做一个物流信息追踪的图,可以用list-style-image属性加上负的margin值来实现:

background-size 如果以百分比的形式设置参数,第一个参数是宽度,第二页参数是高度.“如果只设置第一个参数,则第二个参数为auto”.这样设置,在Firefox chrome 浏览器中,图片都能根据元素的大小,平铺到元素上. background-size: 100%; 但是,在IE 浏览器上,如果元素的高度大于图片高度时,图片将"repeat"显得,我们期望的结果:在高度时,图片也能均匀地拉伸,以达到铺满元素的效果. background-size: 100%; back

background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示*/ background:url(背景图片路径) no-repeat bottom center;/*不重复背景图片底部中间显示*/ background:url(背景图片路径) no-repeat right top;/*不重复背景图片右上方显示*/ background:url(背景图片路径)

今天解除了几个曾经没有用到的属性,所以想总结并且复习一下. background-origin属性:有三个属性值,分别是border-box,padding-box,content-box.看到border-box是不是联想到了CSS3中的盒子模型. box-sizing:border-box.它是为了减少CSS中的盒模型padding和border值计算的繁琐. 首先先说一下: background-origin属性:它表示 background-position 属性相对于什么位置来定位.

1.background-repeat 不用说,常用直接no-repeat 2.background-size 常用的分为两个,一个是铺满:cover, 另一个是使图像适应宽高:contain 3.background-position 设置图片所处的位置:left/right/bottom/top/center