一、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. 【阿里云IoT+YF3300】12.阿里云IoT Studio入门介绍

    阿里云IoT Studio是针对物联网场景提供的生产力工具,可覆盖各个物联网行业核心应用场景,帮助您高效经济地完成设备.服务及应用开发.物联网开发服务提供了移动可视化开发.Web可视化开发.服务开发与 ...

  2. Educational Codeforces Round 80 (Rated for Div. 2)部分题解

    A. Deadline 题目链接 题目大意 给你\(n,d\)两个数,问是否存在\(x\)使得\(x+\frac{d}{x+1}\leq n\),其中\(\frac{d}{x+1}\)向上取整. 解题 ...

  3. Docker深入浅出系列 | Image实战演练

    目录 课程目标 Container与Image核心知识回顾 制作Docker Image的两种方式 Dockerfile常用指令 Image实战篇 通过Dockerfile制作Image 通过Dock ...

  4. IDEA | 更改idea打开新项目默认配置

    背景 使用过idea的童鞋应该都发现,用idea打开一个新项目,总是需要重新配置一遍,它会使用系统默认配置,例如maven.JDK等设置. 解决方案 IDEA其实有个设置是可以更改新项目的默认配置,大 ...

  5. 使用信号管理nginx的父子进程

    master进程 通过CHLD监控worker进程,worker异常退出,通过CHLD信号拉起worker进程. 接收信号 TERM,INT信号表示立刻停止worker进程 QUIT信号表示优雅的停止 ...

  6. Codeforces_845

    A.排序,比较中间两个大小. #include<bits/stdc++.h> using namespace std; ]; int main() { ios::sync_with_std ...

  7. 源码编译安装MySQL5.7

    一.数据库 概述 什么是数据库?简单来说就是存储数据的仓库.这个仓库它会按照一定的数据结构来对数据进行组织和存储.我们可通过数据库提供的多种方法来管理其中的数据 说比较通俗一点就是计算机中的数据库就是 ...

  8. 由lwip的mbox中netbuf传递看指针的指针

    如果使用netconn API的话,udp接收过程需要用到mbox传递接收的包(传递的是指针) mbox发送过程: api_msg.c中recv_udp中会将接收的包发送给udp的接收mbox sys ...

  9. HSRP 详解

    简介 HSRP(Hot Standby Router Protocol 热备份路由器协议)是Cisco的专有协议.HSRP把多台路由器组成一个“热备份组”,形成一个虚拟路由器.这个组内只有一个路由器是 ...

  10. PBFT 算法 java实现(下)

    PBFT 算法的java实现(下) 在上一篇博客中(如果没有看上一篇博客建议去看上一篇博客),我们介绍了使用Java实现PBFT算法中节点的加入,view的同步等操作.在这篇博客中,我将介绍PBFT算 ...