一、CSS背景说明

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

1.1 背景图片(image)

background-image 属性允许指定一个图片展示在背景中(只有CSS3才可以多背景)可以和 background-color 连用。 如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。

background-image : none | url (url) ;
/*none :  无背景图(默认的)
url :  使用绝对或相对地址指定背景图像 */
background:url("1.jpg") 0 0 no-repeat,
url("2.jpg") 200px 0 no-repeat,
url("3.jpg") 400px 201px no-repeat;
/*这样写等价于:(若有重叠,后边的覆盖前边的)*/
background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;

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

background-repeat : repeat | no-repeat | repeat-x | repeat-y ;
/*repeat :  背景图像在纵向和横向上平铺(默认的)
no-repeat :  背景图像不平铺
repeat-x :  背景图像在横向上平铺
repeat-y :  背景图像在纵向平铺 */

1.3 背景位置(position)
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
如果和精确单位和方位名字混合使用,则必须是x坐标在前,y坐标后面。比如 background-position: 15px top;   则 15px 一定是  x坐标   top是 y坐标。

background-position : length || length
/*length : 百分数 | 由浮点数字和单位标识符组成的长度值(一般为px)。*/
background-position : position || position
/*position : top | center | bottom | left | center | right */

1.4 背景附着(attachment)
设置或检索背景图像是随对象内容滚动还是固定的。

background-attachment : scroll | fixed
/*scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定 */

二、背景连写

background属性的值的书写顺序官方并没有强制标准的。

/*background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置*/
background: #FFF url(image.jpg) repeat-y scroll 50% 0 ;

三、背景透明

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

background: rgba(0,0,0,0.3);
/*最后一个参数是alpha 透明度 取值范围 0~1之间*/

CSS背景说明及连写的更多相关文章

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

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

  2. 深入理解CSS背景

    前面的话 背景和字体一样,是一个复合属性,而且它是一个使用频率很高的属性.在CSS3中,背景属性在保持以前用法的同时,增加了新的相关属性.本文将详细介绍关于背景的知识 背景颜色 背景色backgrou ...

  3. CSS 背景-CSS background

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

  4. div css背景图片不显示

    我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...

  5. css背景图与html插入img的区别

    一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...

  6. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  7. vue webpack 打包后css背景图路径问题

    最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...

  8. CSS 背景background实例

    css背景background用于设置html标签元素的背景颜色.背景图片已经其他背景属性.本文章向码农介绍CSS 背景background使用方法和基本的使用实例.需要的码农可以参考一下. 一.Cs ...

  9. CSS背景图像的简单响应

    本文设有很多,最理想的解决方案,响应图像只是其中之一.我们建议您查看不同的方法,然后再选择一个特定的响应图像解决方案,包括这两个:如何避免重复下载响应图像中选择响应图像解决方案. 大家都在谈论的的sr ...

随机推荐

  1. window nginx 中文路径, 文件名乱码问题解决

    window nginx 中文路径, 文件名乱码, error, not found 此问题是由于windows系统编码与nginx编码设置不一致导致的,因此我们要统一二者的编码 nginx编码设置 ...

  2. ROS与激光雷达入门-ROS中使用激光雷达(RPLIDAR)

    激光雷达(RPLIDAR) 我这里用的是思岚(rplidar)A1,通过ros系统去驱动激光雷达,现在做了一个基本的入门. RPLIDAR是低成本的二维雷达解决方案,由SlamTec公司的RoboPe ...

  3. 如何运行使用gradle打包的项目

    目标:https://github.com/davenkin/springmvc4-helloworld 使用SpringMVC编写的一个HelloWorld程序. 初学Gradle只能一步步摸索前进 ...

  4. LoadIcon的使用

    LoadIcon msdn: Loads the specified icon resource from the executable (.exe) file associated with an ...

  5. linux笔记之解压

    从1.15版本开始tar就可以自动识别压缩的格式,故不需人为区分压缩格式就能正确解压: Linux下常见的压缩包格式有5种:zip tar.gz tar.bz2 tar.xz tar.Z 其中tar是 ...

  6. Codeforces_816

    A.不断增加时间,直到符合要求. #include<bits/stdc++.h> using namespace std; int a,b; char c; int f(int x) { ...

  7. Codeforces_512_B

    http://codeforces.com/problemset/problem/512/B dp题,因为状态很多,所以用map保存,注意代码中的那个二层循环不能内外换,因为map会自动排序. #in ...

  8. zabbix4.0的安装与配置

    #安装zabbix监控首先的先安装LNMP环境,在这里我采用事先准备好的脚本进行安装LNMP环境 脚本内容如下: #!/bin/bash # DATE:Wed Jan # hw226234@126.c ...

  9. C++:析构函数的调用时机

    结论:只有当类的某个实例化对象的构造函数执行完毕,而且当该对象退出作用域时,才会执行析构函数. 如果在执行构造函数的过程中抛出了异常,就不会调用析构函数 上测试代码: class Test { pub ...

  10. 渡一教育公开课重点笔记之html

    常用的编码字符集:(charset) 1)gb2312 (国标第2312条)缺点:只能识别简体中文 2)gbk (国标扩展字符集,可识别所有亚裔字符) 3)Unicode (万国码) 4)Utf-8 ...