• 复合属性—background

如果同时设置了background-color和background-image时,背景颜色会被图片覆盖。

background-image: 用作背景的图片,background:url( );

如果将背景设置为图片,那么我们就要考虑以下几个属性了。

background-repeat:

repeat-x:横向平铺

 

repeat-y:纵向平铺

 

round:背景图像自动缩放直到适应且填充满整个容器。

 

space:背景图像以相同的间距平铺且填充满整个容器或某个方向。

 

repeat:背景图像在横向和纵向平铺,默认值。

 

no-repeat:不平铺

 

background-size:

具有两个参数,值既可以是px也可以是%或者是auto(默认)。若只有一个参数,则为宽度,高度等比例缩放,如果背景图片的尺寸超过容器,将会被裁切。若有两个参数,则为宽高。

cover:背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器,不过超出的部分将会被裁切。

 

contain:此属性值可以将背景图片等比例放大或者缩小。contain只要求某一个方位上将容器覆盖,比如纵向或者横向能够最小程度将容器覆盖。

 

background-position:确定背景图片的位置

background-position : length || position

length:<percentage> | <length>

position:left center|left top| ……

1、background-position:0 0;
背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。该属性定位不受元素的 padding影响,例如,我们给容器元素增加padding值,只是影响了容器元素的高度和宽度,背景图片的左上角还是与容器元素的左上角对齐。

 

2、background-position:-10px -20px;

图片以容器左上角为参考向左偏移10px,向上偏移 20px,

 

3、background-position:50% 50%;

图片水平和垂直居中。与 background-position:center center;效果等同。

等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
等同于y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。

x=(300-178)*50%=61px y=(300-108)*50%=96px

 

4、background-position:100% 100%;

图片处于容器元素的右下角,与 background-position:right bottom;效果等同。

 

background-attachment:定义用户滚动页面时背景图片会发生什么。

scroll:默认值,背景图相对于元素固定,背景随页面滚动而移动,即背景和内容绑定。

 

但是有一种情况例外:对于可以滚动的元素(设置为overflow:scroll的元素)。当background-attachment设置为scroll时,背景图不会随元素内容的滚动而滚动。

 

fixed:背景图相对于视口固定,就算元素有了滚动条,背景图也不随内容移动,好像背景图片被钉到了视窗上一样。

 

local:背景图相对于元素内容固定。

背景图片会随着页面其余部分的滚动而移动。但如果内容是可以滚动的元素(设置为overflow:scroll的元素),背景图会随元素内容的滚动而滚动,因为背景图是相对于元素自身内容定位,开始固定,元素出现滚动条后背景图随内容而滚动。

 

这就是关于background这个复合属性的一些基本知识啦~

CSS背景-background的更多相关文章

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

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

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

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

  3. CSS背景background图片

    一.CSS背景background图片   -   TOP 1.背景图片语法background-image:url() 引入背景图片background-repeat:no-repeat 设置背景图 ...

  4. CSS 背景background实例

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

  5. CSS 背景 background 讲解

    背景语法:background: background-color || background-image || background-repeat || background-attachment ...

  6. css 背景(background)属性、背景图定位

    background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

  7. css 背景 background

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! background我们一般用到的的属性有: background-attachment:背景(图片)是否 ...

  8. css常用样式背景background如何使用

    css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个声明中,background背景属性常见为以下这些:.background-color ...

  9. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

随机推荐

  1. 「mysql优化专题」主从复制面试宝典!面试官都没你懂得多!(11)

    内容较多,可先收藏,目录如下: 一.什么是主从复制 二.主从复制的作用(重点) 三.主从复制的原理(重中之重) 四.三步轻松构建主从 五.必问面试题干货分析(最最重要的点) 一.什么是主从复制(技术文 ...

  2. maven pom.xml 中各个标签元素的作用

    <groupId> : 项目或者组织的唯一标识 <artifactId>项目的通用名称 <artifactId>项目的通用名称 <version> 项目 ...

  3. idea历史版本下载

    https://confluence.jetbrains.com/display/IntelliJIDEA/Previous+IntelliJ+IDEA+Releases

  4. 使用MVC创建API

    1.新建MVC-WebAPI 2.Build后页面是这样的,这就是我们需要的页面. 3.自己Add API的页面,然后Run,会发现页面没有action和Description 4.显示action, ...

  5. 【python】type()、instance()

    >>> a=520 >>> type(a) <class 'int'> >>> a=' >>> type(a) &l ...

  6. HTML基础教程-简介

    关于html5笔记前言 之前有在W3school学习过html5以及javascript.为了和大家一块学习,为了回顾这些遗忘的基础,现在我把之前自己整理的笔记共享给大家.希望大家共同进步. HTML ...

  7. 用LinkedList集合演示栈和队列的操作

    在数据结构中,栈和队列是两种重要的线性数据结构.它们的主要不同在于:栈中存储的元素,是先进后出:队列中存储的元素是先进先出.我们接下来通过LinkedList集合来演示栈和队列的操作. import ...

  8. android v4兼容包

    一句话解释android兼容包就是:支持更多的组件,样式更好看了.好粗糙的解释啊! 我们都知道Android一些SDK比较分裂,为此google官方提供了Android Support Library ...

  9. lesson - 11 正则表达式

    正则就是有一定规律的字符串,有几个特殊符号很关键(. * + ? | ),我们平时不仅可以用命令行工具grep/sed/awk去引用正则,而且还可以把正则嵌入在nginx.apache.甚至php.p ...

  10. 串口调试者v2.1------开源c#串口调试工具

    第一步:上图 第二步:上代码 >>>>>>>>>>>源代码下载<<<<<<<<< ...