CSS背景-background
- 复合属性—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的更多相关文章
- CSS背景background、background-position使用详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- CSS背景background详解,background-position详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- CSS背景background图片
一.CSS背景background图片 - TOP 1.背景图片语法background-image:url() 引入背景图片background-repeat:no-repeat 设置背景图 ...
- CSS 背景background实例
css背景background用于设置html标签元素的背景颜色.背景图片已经其他背景属性.本文章向码农介绍CSS 背景background使用方法和基本的使用实例.需要的码农可以参考一下. 一.Cs ...
- CSS 背景 background 讲解
背景语法:background: background-color || background-image || background-repeat || background-attachment ...
- css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- css 背景 background
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! background我们一般用到的的属性有: background-attachment:背景(图片)是否 ...
- css常用样式背景background如何使用
css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个声明中,background背景属性常见为以下这些:.background-color ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
随机推荐
- 「mysql优化专题」主从复制面试宝典!面试官都没你懂得多!(11)
内容较多,可先收藏,目录如下: 一.什么是主从复制 二.主从复制的作用(重点) 三.主从复制的原理(重中之重) 四.三步轻松构建主从 五.必问面试题干货分析(最最重要的点) 一.什么是主从复制(技术文 ...
- maven pom.xml 中各个标签元素的作用
<groupId> : 项目或者组织的唯一标识 <artifactId>项目的通用名称 <artifactId>项目的通用名称 <version> 项目 ...
- idea历史版本下载
https://confluence.jetbrains.com/display/IntelliJIDEA/Previous+IntelliJ+IDEA+Releases
- 使用MVC创建API
1.新建MVC-WebAPI 2.Build后页面是这样的,这就是我们需要的页面. 3.自己Add API的页面,然后Run,会发现页面没有action和Description 4.显示action, ...
- 【python】type()、instance()
>>> a=520 >>> type(a) <class 'int'> >>> a=' >>> type(a) &l ...
- HTML基础教程-简介
关于html5笔记前言 之前有在W3school学习过html5以及javascript.为了和大家一块学习,为了回顾这些遗忘的基础,现在我把之前自己整理的笔记共享给大家.希望大家共同进步. HTML ...
- 用LinkedList集合演示栈和队列的操作
在数据结构中,栈和队列是两种重要的线性数据结构.它们的主要不同在于:栈中存储的元素,是先进后出:队列中存储的元素是先进先出.我们接下来通过LinkedList集合来演示栈和队列的操作. import ...
- android v4兼容包
一句话解释android兼容包就是:支持更多的组件,样式更好看了.好粗糙的解释啊! 我们都知道Android一些SDK比较分裂,为此google官方提供了Android Support Library ...
- lesson - 11 正则表达式
正则就是有一定规律的字符串,有几个特殊符号很关键(. * + ? | ),我们平时不仅可以用命令行工具grep/sed/awk去引用正则,而且还可以把正则嵌入在nginx.apache.甚至php.p ...
- 串口调试者v2.1------开源c#串口调试工具
第一步:上图 第二步:上代码 >>>>>>>>>>>源代码下载<<<<<<<<< ...