CSS背景说明及连写
一、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背景说明及连写的更多相关文章
- 你不知道的CSS背景—css背景属性全解
CSS背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的CSS属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱. 首先列举一下CSS中关于元素背景的所有属性并 ...
- 深入理解CSS背景
前面的话 背景和字体一样,是一个复合属性,而且它是一个使用频率很高的属性.在CSS3中,背景属性在保持以前用法的同时,增加了新的相关属性.本文将详细介绍关于背景的知识 背景颜色 背景色backgrou ...
- CSS 背景-CSS background
这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法 - TOP CSS背景基础知识 CSS 背 ...
- div css背景图片不显示
我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...
- css背景图与html插入img的区别
一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- vue webpack 打包后css背景图路径问题
最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...
- CSS 背景background实例
css背景background用于设置html标签元素的背景颜色.背景图片已经其他背景属性.本文章向码农介绍CSS 背景background使用方法和基本的使用实例.需要的码农可以参考一下. 一.Cs ...
- CSS背景图像的简单响应
本文设有很多,最理想的解决方案,响应图像只是其中之一.我们建议您查看不同的方法,然后再选择一个特定的响应图像解决方案,包括这两个:如何避免重复下载响应图像中选择响应图像解决方案. 大家都在谈论的的sr ...
随机推荐
- window nginx 中文路径, 文件名乱码问题解决
window nginx 中文路径, 文件名乱码, error, not found 此问题是由于windows系统编码与nginx编码设置不一致导致的,因此我们要统一二者的编码 nginx编码设置 ...
- ROS与激光雷达入门-ROS中使用激光雷达(RPLIDAR)
激光雷达(RPLIDAR) 我这里用的是思岚(rplidar)A1,通过ros系统去驱动激光雷达,现在做了一个基本的入门. RPLIDAR是低成本的二维雷达解决方案,由SlamTec公司的RoboPe ...
- 如何运行使用gradle打包的项目
目标:https://github.com/davenkin/springmvc4-helloworld 使用SpringMVC编写的一个HelloWorld程序. 初学Gradle只能一步步摸索前进 ...
- LoadIcon的使用
LoadIcon msdn: Loads the specified icon resource from the executable (.exe) file associated with an ...
- linux笔记之解压
从1.15版本开始tar就可以自动识别压缩的格式,故不需人为区分压缩格式就能正确解压: Linux下常见的压缩包格式有5种:zip tar.gz tar.bz2 tar.xz tar.Z 其中tar是 ...
- Codeforces_816
A.不断增加时间,直到符合要求. #include<bits/stdc++.h> using namespace std; int a,b; char c; int f(int x) { ...
- Codeforces_512_B
http://codeforces.com/problemset/problem/512/B dp题,因为状态很多,所以用map保存,注意代码中的那个二层循环不能内外换,因为map会自动排序. #in ...
- zabbix4.0的安装与配置
#安装zabbix监控首先的先安装LNMP环境,在这里我采用事先准备好的脚本进行安装LNMP环境 脚本内容如下: #!/bin/bash # DATE:Wed Jan # hw226234@126.c ...
- C++:析构函数的调用时机
结论:只有当类的某个实例化对象的构造函数执行完毕,而且当该对象退出作用域时,才会执行析构函数. 如果在执行构造函数的过程中抛出了异常,就不会调用析构函数 上测试代码: class Test { pub ...
- 渡一教育公开课重点笔记之html
常用的编码字符集:(charset) 1)gb2312 (国标第2312条)缺点:只能识别简体中文 2)gbk (国标扩展字符集,可识别所有亚裔字符) 3)Unicode (万国码) 4)Utf-8 ...