纯色html背景,css 背景(background)属性、背景图定位-CSDN博客

background属性：

Background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图上和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

(1)background-color 设置背景颜色

(2)background-image 设置背景图片地址

(3)background-repeat 设置背景图片如何重复平铺

(4)background-position 设置背景图片的位置

(5)background-attachment 设置背景图片是固定还是随着页面滚动条滚动

实际应用中，可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，如：”background:#00ff00 url(bgimage.gif) no-repeat left center fixed”,其中#00ff00是设置background-color;url(bgimage.gif)是设置background-image;no-repeat是设置background-repeat;left center是设置background-position;fixed是设置background-attachment;各设置项用空格隔开，有的设置项也可以不写，它会使用默认值。

background-size使用：

--length:

固定的值，如：100px 100px

--percentage:

百分比，如：90% 90%

--cover:

背景图片的较小边放大到目标大小结束

--contain:

背景图片的较大边放大到目标大小结束

代码：

background属性

.box{

width:400px;

height:200px;

border:1px solid #000;

margin:50px auto 0;

/* 设置背景图片 */

background-image:url("images/头像2.png");

/* repeat-x:只平铺x轴方向 */

/*background-repeat:repeat-x; */

/* repeat-y:只平铺y轴方向 */

/*background-repeat:repeat-y;*/

/* no-repeat:只平铺一次 */

background-repeat:no-repeat;

/* repeat:默认值平铺所有的 */

/*background-repeat:repeat;*/

/* 设置背景图片的位置,第一个参数表示水平方向、第二个参数表示垂直方向的位置

水平方向：left center right

垂直方向：top center bottom

/*background-position:center center; /left:左右位置 top:上下位置 *!*/

/* background-position可以是方向词，也可以是数值 */

/*background-position:30px 10px;*/

/*background-position:-10px 20px;*/

/* 合并写法： */

background:url("images/头像2.png") -10px 10px no-repeat cyan;

}

背景图片

页面效果：

背景图定位代码：

背景定位

.box{

width:200px;

height:200px;

border:2px solid black;

margin:50px auto 0;

background-image:url("images/hellokity.jpg");

background-repeat:no-repeat;

background-position:-159px -491px;

}

关于html与css的标签及属性(text文本属性、背景background属性、表格标签table、列表、)

text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...

CSS背景和CSS3背景background属性

css背景属性用于定义HTML元素的背景背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...

CSS中background属性详解

CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

深入学习css之background属性

css中允许应用纯色作为背景,也允许使用图片作为背景. background一共有8个对应的属性: 1.background-color:颜色值用于设定背景的颜色有3种定义颜色的形式, 1, 颜色 ...

CSS之样式属性(背景固定、圆形头像、模态框)

CSS属性一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...

CSS之background属性

css背景是个很有意思的东西,可设置背景色:background-color 背景图:backgoround-image 背景图显示相对位置:background-position,正数图片往右下移 ...

CSS背景background、background-position使用详解

背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

CSS背景background详解，background-position详解

背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

css常用样式背景background如何使用

css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个声明中,background背景属性常见为以下这些:.background-color ...

随机推荐

bootstrap-标题

1.重置了margin-top和margin-bottom的值,h1到h3重置后margin-top的值都是20px:h4到h6重置后的值都是10px: 2.所有标题的行高都是1.1(也就是font- ...

使用windbg分析iis崩溃的一个实例

问题背景说明:客户的生产环境不定时发生崩溃,需要定位崩溃的原因.在开发环境不能重现该问题,准备抓取IIS的dump文件分析第一步:在客户的生产环境抓取dump文件参考:IIS崩溃时自动抓取Dump ...

禁止ultraedit自动检查更新的方法

菜单栏: 高级->配置->应用程序布局->其他取消勾选“自动检查更新”

没有开发者账号，如何解锁wp8设备

原文 http://www.cnblogs.com/vsdot/p/3263454.html 问题的引入好了,问题的由来是这样的,我想把我开发的wp8手机部署到手机上,可是竟然出现了下面的问题: [ ...

Atitit&period;Hibernate于Criteria 使用汇总and 关系查询 and 按照子对象查询 o9o

Atitit.Hibernate于Criteria 使用总结and 关联查询 and 依照子对象查询 o9o 1. Criteria,,Criterion ,, 1 <2. 基本的对象黑头配置磊 ...

【BZOJ1778】[Usaco2010 Hol]Dotp 驱逐猪猡

题解: 网上有一种复杂的方法..好像复杂度并没有优势就没看定义f[i]表示i的期望经过次数,f[i]=sigma{f[j]*p/q/du[j]}+(i==1); 然后高斯消元就可以了最后求出来的f ...

MATLAB 程序处理结果出现 NAN 问题

1)0/0 或者说任意常数/0 也就是0不能做分母. (nan出现的情况绝大部分是分母出现0了) 若分子为0的情况,(分母不为0),结果也应该是0而非 NAN. 2)如果是无穷大比无穷大 ...

android OOM 内存溢出

韩梦飞沙韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 一个应用的可用内存是有限的,如果超过了可用的内存,就会内存溢出. 1,避免已经不用的对 ...

FreeRTOS 低功耗之睡眠模式

以下转载自安富莱电子: http://forum.armfly.com/forum.php 低功耗是 MCU 的一项重要的指标,比如某些可穿戴的设备,其携带的电量有限,如果整个电路消耗的电量特别大的话 ...

JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金)

第一: 限制只能是整数