background 背景属性

我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(background-image)。

css 背景常见属性

  • background-color
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment
  • background-image

一、background-color

  background-color 属性设置元素的背景颜色。它会会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。如果不想它包含边框可以用它的另一个属性clip来处理。

看效果图,我们知道默认背景颜色会填充边框的。

它的取值有:

1、关键字:red,blue等

2、十六进制值:#ff0000

3、transparent值

4、inherit:从父元素那继承的值

5、rgb、rgba(如rgba(255,255,0,.8))、hsl、hsla(如hsla(360, 50%, 50%, .5))

二、background-position

  background-position属性顾名思义是用来控制背景的位置,它同时设定了元素和图片的原点,而原点决定了元素和图片中某一点的水平和垂直坐标。默认情况原点位于左上角。也就是说元素的左上角和图片的左上角是对齐的。

它的取值:

一、它的五个关键字:top、left、right、bottom、center。二二取值都可以成为它们的属性值。

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

上面的关键字如果只设定一个,那另外一个也会取相同的值。关键字的顺序不重要,left bottom和bottom left意思一样。

二、百分比值:

  第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。只设定一个值,则只用来设定水平位置,而垂直位置会默认设为center。

三、像素或其他css单位

  第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。您可以混合使用 % 和 position 值。

此外还可以运用正负值,将图片左上角定位到元素外部,或将图片右下角推到元素外部。

background-position: top right;background-repeat:no-repeat;

  效果图:

三、background-repeat

  background-repeat 属性设置如何重复背景图像。默认背景图像在水平和垂直方向上重复。

它的取值有:

repeat:默认值

repeat-x:水平方向重复

repeat-y:水平方向重复

no-repeat:图像只出现一次

inherit:继承

此外css3还新增二个值:

background-repeat:round:为图片不被剪切,自动调整图片大小来适应背景区域。

background-repeat:space:为图片不被剪切,自动添加图片间空白来适应背景区域。

下图是值为background-repeat:space的效果图:

下面是值为background-repeat:repeat-y的效果图:

四、background-image

  该属性为元素设置背景图像。格式为background-image:url(图片路径)。

五、background-size

css3新增的背景尺寸,顾名思义就是来调整图片的尺寸。

它的取值:

百分比:%

像素值:第一个值设置宽度,第二个值设置高度。

cover:拉大图片,完全填满背景区;保持宽高比。

contain:缩放图片,使其恰好适合背景区;保持宽高比。

  上面最后二个属性值会将很小的图片拉得很大,so会导致图片失真。

六、background-attachment

该属性规定元素内背景图片是否随元素滚动而移动。默认值是scroll。

它的值:

scroll

fixed:背景图像不会随元素移动。通常应用给body元素中心位置添加水印等,让水印不随页面滚动而移动。

inherit

七、background-clip

  background-clip 属性规定背景的绘制区域。

它的取值:

content-box:背景被裁剪到内容框

border-box:背景被裁剪到边框盒

padding-box:背景被裁剪到内边距

background-color:yellow;background-clip:content-box;padding:15px;

  上面的代码给容器增加了15px的内边距后,背景被裁剪了内容区域里,

效果图如下:

  

八、background-origin

  background-origin 属性规定 background-position 属性相对于什么位置来定位。

取值:

content-box:背景图像相对于内容框来定位

border-box:背景图像相对于边框来定位

padding-box:背景图像相对于内边距框来定位

  如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。

九、背景渐变

background:linear-gradient

background:radial-gradient

  具体解释看这一篇

十、background-break

控制分离元素的显示效果

css background 背景知识详解的更多相关文章

  1. 如何把canvas元素作为网站背景总结详解

    如何把canvas元素作为网站背景总结详解 一.总结 一句话总结:最简单的做法是绝对定位并且z-index属性设置为负数. 1.如何把canvas元素作为网站背景的两种方法? a.设置层级(本例代码就 ...

  2. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  3. RabbitMQ基础知识详解

    什么是MQ? MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.MQ是消费-生产者模型的一个典型的代表,一端往消息队列中不断写入消息,而另一端则可以读取队列中 ...

  4. RabbitMQ,Apache的ActiveMQ,阿里RocketMQ,Kafka,ZeroMQ,MetaMQ,Redis也可实现消息队列,RabbitMQ的应用场景以及基本原理介绍,RabbitMQ基础知识详解,RabbitMQ布曙

    消息队列及常见消息队列介绍 2017-10-10 09:35操作系统/客户端/人脸识别 一.消息队列(MQ)概述 消息队列(Message Queue),是分布式系统中重要的组件,其通用的使用场景可以 ...

  5. 浏览器对象模型(BOM)是什么?(体系结构+知识详解)(图片:结构)

    浏览器对象模型(BOM)是什么?(体系结构+知识详解)(图片:结构) 一.总结 1.BOM操作所有和浏览器相关的东西:网页文档dom,历史记录,浏览器屏幕,浏览器信息,文档的地址url,页面的框架集. ...

  6. Intent知识详解

    Intent知识详解 一.什么是Intent 贴一个官方解释: An intent is an abstract description of an operation to be performed ...

  7. Css盒模型属性详解(margin和padding)

    Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...

  8. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  9. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

随机推荐

  1. phpmyadmin更改用户名和密码

    我是用的xampp集成环境,wampp也差不多.另外没有配图,希望读者可以在实践的过程中有所思考,本文的主旨就是:找一个不叫root但和root一样厉害的人来管理数据库. 1,做个准备 首先创建一个和 ...

  2. 【第一周】 网络爬虫之规则 北京理工大学嵩天 mooc

    rrequests库的7个主要方法 方法 说明 requests.request() 构造一个请求,支撑以下各方法的基础方法 requests.get() 获取HTML网页的主要方法,对应于HTTP的 ...

  3. 使用Git向GitHub上上传代码

    参考:http://www.cnblogs.com/yxhblogs/p/6130995.html 如果遇到[git无法pull仓库refusing to merge unrelated histor ...

  4. CSL 的字符串(思维+STL操作)

    链接:https://ac.nowcoder.com/acm/contest/551/D 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 524288K,其他语言1048 ...

  5. 【KMP】【字符串】KMP字符串匹配算法 学习笔记

    一.简介     KMP是由Knuth.Morris和Prat发明的字符串匹配算法,它的时间复杂度是均摊\(O(n+m)\).其实用Hash也可以做到线性,只不过Hash存在极其微小的难以避免的冲突. ...

  6. #537 (Div. 2) Creative Snap (思维+dfs)

    https://codeforces.com/contest/1111/problem/C 横坐标1..2^n对应着2^n个复仇者的基地,上面有k个复仇者(位置依次给出).你是灭霸你要用以下方法消灭这 ...

  7. 关于cin 与 cout 的加速

    在用cin 与 cout 的时候 可以使用 ios::sync_with_stdio(); cin.tie(); cout.tie(); 这样在输入大数据的时候可以加快许多

  8. BZOJ - 4066 KD树 范围计数 暴力重构

    题意:单点更新,大矩阵(\(n*n,n≤10^5\))求和 二维的KD树能使最坏情况不高于\(O(N\sqrt{N})\) 核心在于query时判断当前子树维护的区间是否有交集/当前子节点是否在块中, ...

  9. 小a与“204”------数列、排序

    链接:https://ac.nowcoder.com/acm/contest/317/B来源:牛客网 小a非常喜欢204204这个数字,因为′a′+′k′=204′a′+′k′=204. 现在他有一个 ...

  10. centos 7 ssh登录安全问题

    2018-10-11 1.ssh禁止root远程登录 修改ssh配置文件/etc/ssh/sshd_config vim /etc/ssh/sshd_config PermitRootLogin ye ...