CSS背景

CSS 可以添加背景颜色和背景图片,以及进行图片设置。

1 background-color 背景颜色

语法:background-color:颜色值|transparent;

补充:

颜色值:颜色名|rgb|十六进制颜色值

transparent:全透明

背景区包括:内容,内边距,边框。不包括外边距。

2 background-image 背景图片

语法:background-image:URL|none;

补充:

none : 无背景图(默认的)

url : 使用绝对或相对地址指定背景图像。例:background-image:url(1.jpg);

背景区包括:内容,内边距,边框。不包括外边距。

默认背景图片位于元素的左上角,在水平,垂直方向上重复。

background-image 属性允许指定一个图片展示在背景中(只有CSS3才可以多背景)可以和 background-color 连用。

如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。

3 background-repeat 背景图片是否平铺

语法:

background-repeat : repeat | no-repeat | repeat-x | repeat-y  

参数:

repeat :  背景图像在纵向和横向上平铺(默认的)

no-repeat :  背景图像不平铺

repeat-x :  背景图像在横向上平铺

repeat-y :  背景图像在纵向平铺

补充:

设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。

4 background-attachment 背景图片是否随滚动条滚动

语法:

background-attachment : scroll | fixed 

参数:

scroll : 默认值,背景图像是随滚动条滚动

fixed : 当页面的其余部分滚动时,背景图像固定(相对于浏览器窗口固定)

5 background-position 背景图片位置

语法:

 background-position : length || length
background-position : position || position

参数:

length : 百分数 | 由浮点数字和单位标识符组成的长度值。

position : top | center | bottom | left | center | right

说明:

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为:(0% 0%)。

如果只指定了一个值,该值将用于横坐标,纵坐标将默认为50%(居中)。若指定了两个值,第二个值将用于纵坐标。

注意:

  1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。

  2. 如果和精确单位和方位名字混合使用,则必须是x坐标在前,y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

6 background-clip 背景图像区域(CSS3)

指定背景的绘制区域。

7 background-origin 背景图像定位(CSS3)

设置元素背景图片的原始起始位置。

background-origin属性指定background-position属性应该是相对位置。

8 background-size 背景图像大小(CSS3)

通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下:

a) 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)。如果只有一个值代表宽度,第二个值高度默认auto,根据宽度值等比例缩放。指定了两个值,以设置值为准。

b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。

 background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

9 多重背景图像(CSS3)

background:url(img1.jpg),url(img2.jpg);

以逗号分隔可以设置多背景,可用于自适应布局 做法就是 用逗号隔开就好了。

  • 一个元素可以设置多重背景图像。

  • 每组属性间使用逗号分隔。

  • 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。

  • 为了避免背景色将图像盖住,背景色通常都定义在最后一组上.

 background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

10 背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度 取值范围 0~1之间

注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不收影响。

背景属性整合(CSS3)

CSS3渐变

1 线性渐变(Linear Gradients)

1)从上到下(默认)

2)从左到右

3)对角

4)使用角度

-webkit-前缀的方向与默认不一致! -moz-和-o-前缀的和默认方向一样。

为了避免这个问题,要将默认的样式代码放在最下面。

     

5)使用结点

多个颜色的控制

默认每个颜色所占比例是均匀的。

说明:

前百分之10都是红色,从百分之10到百分之15渐变到橙色;如果red设置为百分之0,那就从一开始就渐变。

第一个颜色,如果不写百分比,默认是百分之零;最后一个颜色,如果不写百分比,默认百分之百。

6)重复渐变

2 径向渐变(Radial Gradients)

center可以不写。

1)颜色结点均匀分布

     

2)颜色结点不均匀分布

     

3)设置形状

4)尺寸大小关键字

圆心相对于最近(远)边(角)渐变。

大小和形状是一个参数,中间用空格隔开。

5)重复渐变

    

6)其他渐变——IE浏览器渐变(IE6~IE8)

不属于CSS3的内容,是采用滤镜的方式。

渐变类型一共有3种。0~2。

等于0时,从开始颜色到结束颜色,从上到下渐变

等于1时,从开始颜色到结束颜色,从左到右渐变

等于2时,从结束颜色到最深颜色(黑色)渐变

渐变应用

      

      

IE11以前无法实现,只能用图片。

CSS列表

1 list-style-type 列表项标记样式

语法:list-style-type:关键字|none;

补充:

默认disc 实心圆点

2 list-style-image 将列表项标记设置为图片

语法:list-style-image:URL|none;

补充:

默认none

3 list-style-position 列表项标记位置

语法:list-style-position:关键inside|outside;

补充:

默认outside:列表项标记放在文本外,且环绕文本,不根据标记对齐。

inside:列表项标记放在文本内,且环绕文本,根据标记对齐。

列表项标记简写

list-style:list-style-type list-style-positon list-style-image

没有默认顺序。

list-style-image会覆盖list-style-type的设置。

CSS——背景及应用的更多相关文章

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

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

  2. 你不知道的CSS背景—css背景属性全解

    CSS背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的CSS属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱. 首先列举一下CSS中关于元素背景的所有属性并 ...

  3. CSS背景background详解,background-position详解

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

  4. CSS背景100%平铺 浏览器缩小背景显示不全解决办法

    本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...

  5. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  6. CSS背景样式

    CSS是级联样式表,用来表现HTML等文件样式的语言,CSS能够真正做到网页的表现与内容分离的设计语言,也就是说,做好了一款网页,可以通过另一个后缀名是css的文件进行修改其中的样式,不过在html的 ...

  7. CSS背景图拉伸自适应尺寸,全浏览器兼容

    突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...

  8. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  9. CSS 背景-CSS background

    这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背 ...

  10. CSS背景属性

    CSS背景属性 1.background-attachment 属性 scroll:默认值.背景图像会随着页面其余部分的滚动而移动. fixed:当页面的其余部分滚动时,背景图像不会移动. inher ...

随机推荐

  1. Fatal error compiling: invalid target release: 11 -> [Help 1]

    <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compi ...

  2. final关键字和static关键字

    final关键字:最终态--修饰成员变量,成员方法,类 final修饰变量: 基本类型变量:该变量为常量不能被赋值 引用类型变量:该地址不能被概变 地址不能被概变的原因: final Student ...

  3. jsp EL运算符

    算术运算符 算术运算符 说明 示例 结果 + 加 ${1 + 1} 2 - 减 ${1 - 1} 0 * 乘 ${1 * 2} 2 /或div 除 ${3 / 2} 1.5 %或mod 取余 ${3 ...

  4. elementUI表单嵌套时间报错

    elementUI表单嵌套日期时间选择时间后报错 <el-form-item label="起始结束时间:" required prop="startime&quo ...

  5. Linux常用命令入门文件、网络、系统及其他操作命令

    Linux常用命令入门文件.网络.系统及其他操作命令.压缩 归档 文件系统 系统管理 用户管理  网络管理 finger 相关命令 netstat ping rsh telnet wget 进程管理等 ...

  6. JCF——Map

    Hashtable LinkedHashMap Properties

  7. hive的调优

    调优 1 Fetch抓取(Hive可以避免进行MapReduce) Hive中对某些情况的查询可以不必使用MapReduce计算.例如:SELECT * FROM employees;在这种情况下,H ...

  8. debian 8 安装 codeblocks

    CodeBlocks优点: 1.所占资源少,对电脑硬件的要求低 2.开源软件,可以查看源代码,虽然我不会修改,但是如果我做一个IDE的话,我一定会参考这个伟大的软件的. 3.最重要的是,它完全跨了三大 ...

  9. O(n)时间复杂度查找数组第二大元素

    分析:要求O(n)时间复杂度,不能用排序.可以设置两个临时变量分别保存当前最大值以及当前第二大的值,然后遍历数组,不断更新最大值和第二大的数值. 代码: bool findSec(vector< ...

  10. CSP2019总结

    CSP2019总结 前言 赛前停课集训了两个星期,自认为已经准备充分了,结果... 不知道有没有写挂分,即使一分没挂,满打满算也只有400出头,还是太菜了. Day0 晚上复习了一会,打了会游戏就睡了 ...