文章目录

一：background-repeat
二：background-position
三：background缩写方式
三：background-size
四：background-origin
五：background-clip

在日常前端开发中，经常需要进行背景或背景图的处理。但是大多数前端er并未真正清楚背景的正确使用方式。经过本章的学习，相信你一定可以解决99%的背景处理问题。
一：简单使用
背景颜色和背景图片是可以共同出现的

 div {width: 300px;height: 300px;background-color: red;background-image: url(./imgs/1.jpg);background-repeat: no-repeat; }

一：background-repeat

background-repeat决定背景图片的平铺方式

background-repeat:repeat (默认值)
background-repeat:no-repeat (不平铺)
background-repeat:repeat-x （水平方向平铺）
background-repeat:repeat-y （垂直方向平铺）

repeat

默认情况下，如果背景图片不能铺满整个盒子时，系统会在水平和垂直方向同时平铺直到覆盖整个盒子

div {width: 300px;height: 300px;background-color: red;background-image: url(./imgs/1.jpg);background-repeat: repeat; }

2.repeat-x

如果背景图片不能将盒子的水平方向铺满，则在水平方向采取平铺处理直到铺满盒子的水平方向。

div {width: 300px;height: 300px;background-color: red;background-image: url(./imgs/1.jpg);background-repeat: repeat-x; }

3.repeat-y

如果背景图片不能将盒子的垂直方向铺满，则在垂直方向采取平铺处理直到铺满盒子的垂直方向。

div {width: 300px;height: 300px;background-color: red;background-image: url(./imgs/1.jpg);background-repeat: repeat-y; }

二：background-position

background-positiont决定背景图片在盒子区域的定位位置。其方位由水平和垂直决定

1.px设置
px决定了背景图片在盒子水平和垂直方向偏移指定px的距离。

div {width: 300px;height: 300px;background-color: red;background-image: url(./imgs/1.jpg);background-repeat: no-repeat;background-position: 100px 100px; }

2.方位词

水平方向:left,center,right

垂直方向:top,center,bottom

背景图居中显示

div {width: 300px;height: 300px;background-color: red;background-image: url(./imgs/1.jpg);background-repeat: no-repeat;background-position: center center; }

3.比例

水平方向= |盒子宽-图片宽| * scale

垂直方向= |盒子高-图片高| * scale

水平和垂直方向的比例偏移位置是按照上面公式计算完成。

如下是背景图居中显示的设置方式

div {width: 300px;height: 300px;background-color: red;background-image: url(./imgs/1.jpg);background-repeat: no-repeat;background-position: 50% 50%; }

三：background缩写方式

background有背景颜色，背景图片，是否平铺等多种样式，为了简化css样式，系统提供了背景的简写方式
background:color url repeat postion
复制代码

背景的简写可以任意省略其中几个属性

三：background-size

background-size决定背景图在盒子中显示的具体大小，属性值需要同时设置背景图的宽和高。

1.具体px

直接指定了背景图的宽和高

设置宽高存在背景图变形问题：我们都清楚每张图片都有自己原始的像素，如果我们每次都直接指定其宽和高那么图片的宽和高直接被压缩到指定像素，图片会存在变形的问题，这样十分影响用户体验。

  div {width: 300px;height: 300px;background-color: red;background-image: url(./imgs/1.jpg);background-repeat: no-repeat;background-size: 200px 50px;}

2. 百分比

百分比是相对于盒子的宽和高决定

百分比也存在背景图变形问题

  div {width: 300px;height: 300px;background-color: red;background-image: url(./imgs/1.jpg);background-repeat: no-repeat;background-size: 50% 10%;}

3.auto

如果宽度是具体数值，高度设置auto,则背景图片的高会根据宽度数值等比拉伸
如果高度是具体数值，宽度设置auto,则背景图片的宽会根据高度数值等比拉伸
如果宽高都设置auto,直接使用原背景图的宽高

如下图所示，图片的高度随着宽度等比拉伸，并未出现图片变形问题。

    div {width: 300px;height: 300px;background-color: red;background-image: url(./imgs/1.jpg);background-repeat: no-repeat;background-size: 200px auto;}

4.cover
cover英文意思覆盖，那么其涵义就是要求背景图片覆盖整个盒子。

规则

选择背景图片的宽和高较小的一方
选择背景图小的一边作为参考，进行背景图的放大或缩小，直到背景图小的一方刚好填充盒子，此时背景图大的一方也会填充盒子。

特点

宽和高等比拉伸或缩小填满整个盒子，宽和高必须同时填满盒子

图片不变形

  div {width: 300px;height: 300px;background-color: red;background-image: url(./imgs/1.jpg);background-repeat: no-repeat;background-size:cover;}

5.contain
contain,要求背景图片的宽和高必须满足其中一个覆盖盒子就行，当图片宽和高都小于盒子时图片会被等比拉伸，如果图片宽或高大于等于盒子宽或者高就停止拉伸。

规则

选择背景图片的宽和高较大的一方
选择背景图大的一边作为参考，进行背景图的放大或缩小，直到背景图大的一方刚好填充盒子。忽略背景图小的一方是否填充。

特点

宽和高等比拉伸或缩，宽或者高满足一个和盒子宽高相同就行。

图片不变形

  div {width: 300px;height: 300px;background-color: red;background-image: url(./imgs/1.jpg);background-repeat: no-repeat;background-size: contain;}

四：background-origin

background-origin决定了背景图片从盒子的什么位置开始渲染

1.background-origin: padding-box(默认值)

从盒子的padding位置开始

.box{margin: 20px auto;width: 300px;height: 300px;padding: 50px;border: 50px solid gold;background-color: red;background-image: url(./imgs/1.jpg);background-repeat: no-repeat;background-origin: padding-box;
}

2.background-origin: content-box

从盒子的内容区域位置开始

.box{margin: 20px auto;width: 300px;height: 300px;padding: 50px;border: 50px solid gold;background-color: red;background-image: url(./imgs/1.jpg);background-repeat: no-repeat;background-origin: content-box;
}

3.background-origin: border-box
从盒子的边框区域位置开始

五：background-clip

background-clip决定了背景颜色从盒子的什么位置开始渲染

background-clip: border-box（从盒子边距开始）
background-clip: content-box（从盒子内容开始）
background-clip: padding-box（默认值，从盒子padding开始）

css中的background属性相关推荐

细说css中的background属性以及一些问题
1.background的属性 1.1background-color 属性设置元素的背景颜色. 这种颜色会填充元素的内容.内边距和边框区域,扩展到元素边框的外边界(但不包括外边距).如果边框有透明部 ...
css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
【CSS】【position】css中的position属性
css中的position属性用于设置元素位置的确定方式,它有以下几种取值: static:默认定位方式,子元素在父容器中挨个摆放 absolute:绝对定位,元素不占据父容器空间,相当于文档body ...
css margin属性 auto,css中margin:auto属性的使用方法
css中margin:auto属性的使用方法发布时间:2020-06-25 10:53:17 来源:亿速云阅读:221 作者:Leah 今天就跟大家聊聊有关css中margin:auto属性的使用 ...
浅析CSS中的overflow属性
随时随地技术实战干货,获取项目源码.学习资料,请关注源代码社区公众号(ydmsq666) overflow属性的作用是规定当内容溢出元素框时发生的事情,定义溢出元素内容区的内容会如何处理. overf ...
css text top,text-align属性(css中文本对齐属性)
text-align属性设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
CSS中的resize属性
CSS | 调整属性 (CSS | resize Property) Starting note: 开始说明: We deal with various elements regularly whil ...
html text align属性,CSS中的text-align属性怎么用
CSS的text-align属性可用于设置文本的位置,接下来的这篇文章将给大家介绍关于CSS中的text-align属性的用法,下面我们来看具体的内容. 我们先来看一段简单的代码在此处显示文字效果 ...
CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...

css中的background属性