写点什么

你可能不是那么了解的 CSS Background

  • 2021-03-12
  • 本文字数:3873 字

    阅读完需:约 13 分钟

你可能不是那么了解的 CSS Background

前言


Background,写过 CSS 的朋友们肯定都知道这个属性的作用,顾名思义,背景嘛。MDN 中对其的定义如下:


Background 是一种  CSS  简写属性,一次性定义了所有的背景属性,包括 color, image, origin 还有 size, repeat 方式等等。


我们首先讲一下 Background 的日常语法:


  • Background 可以使用简写或者单独设置其中一项:

  • 官方推荐顺序为:background: background-color,background-image,background-repeat,background-attachment,background-position;

  • 不强制要求书写顺序

  • 简写语法

  • 单独设置样式


说明默认值版本
background-color指定要使用的背景颜色transparentCSS2.1
background-position指定背景图像的位置0%, 0%CSS2.1
background-image指定要使用的一个或多个背景图像noneCSS2.1
background-repeat指定如何重复背景图像repeatCSS2.1
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。scrollCSS2.1
background-size指定背景图片的大小autoCSS3
background-origin指定背景图像的定位区域padding-boxCSS3
background-clip指定背景图像的绘画区域border-boxCSS3


Background 基础篇


这里给大家展示一下几个常见的 background 的属性的用法:


<style>    .div1 {        width: 100px;        height: 100px;        background-color: black;        background-image: url('img1');        background-size: 50%;        background-repeat: no-repeat;    }</style><body>    <div class="div1"></div></body>
复制代码



  • background-color  背景颜色

  • 属性值可设置为:

(1)单词:background-color: black;

(2)十六进制:background-color: #000;

(3)RGB 色彩模式:background-color: rgb(0, 0, 0);

  • background-image  背景图片

  • background-image: url('')

  • 也可同时设置多张图片,详见进阶篇 - 多背景图片

  • background-size  背景图片尺寸

  • 常用属性值有:

(1)百分比:background-size: 100%;

(2)像素值:background-size: 100px;

  • 当只设置一个值时,默认为宽度,而高度按比例自适应。

  • background-repeat  背景图片重复

  • 常用属性值有:

(1)repeat (重复):background-repeat: repeat;

(2)repeat-x (横向重复):background-repeat: repeat-x;

(3)repeat-y (纵向重复):background-repeat: repeat-y;

(4)no-repeat (不重复):background-repeat: no-repeat;


Background 进阶篇

多背景图片   background-image


在 CSS2.1 中,元素只能添加一张背景图片。然而在 CSS3 中,我们可以给元素添加多张背景图片。其兼容性如下图所示:



  • 多张背景图片可针对每一张设置单独的样式,对应样式用逗号分隔


<style>  .div1 {    width: 100px;    height: 100px;      background-color: black;    background-image: url('img1'), url('img2');    background-size: 50%, 100%;    background-repeat: repeat-x, no-repeat;  }</style><body>  <div class="div1"></div></body>
复制代码



  • 如果属性值的个数与图片个数不相等呢?


<style>  .div1 {    width: 100px;    height: 100px;
background-color: black; background-image: url('img1'), url('img2'), url('img3'); background-size: 50%, 30%; background-repeat: repeat-y, no-repeat; }</style><body> <div class="div1"></div></body>
复制代码



多背景图片总结:


  • 背景图片所生效的样式,是属性值中与图片位置对应的值;

  • 如果属性值比背景图片的个数要少,那么没有对应的值的图片样式以第一个值为准;

  • 背景图片的层级按从左往右,依次减小。当然,层级最低的还是 background-color


背景渐变   background-image: linear-gradient


背景渐变是基于 background-image 来设置的。具体语法详见 MDN

其兼容性如下图所示:


  • background-image: linear-gradient  路径渐变(可手动设置方向,默认自下向上)

  • linear-gradient() 的用法如下用法: ( 详见 MDN )


<style>  .div1 {    background-image: linear-gradient(#71c9ce, #e3fdfd);  }</style><body>  <div class="div1"></div></body>
复制代码


  • background-image: radial-gradient  径向渐变

  • radial-gradient 用法如下:(详见 MDN )


<style>  .div1 {    background-image: radial-gradient( #71c9ce, #e3fdfd);  }</style><body>  <div class="div1"></div></body>
复制代码



  • background-image: repeating-linear-gradient  重复路径渐变


<style>  .div1 {    background-image: repeating-linear-gradient(45deg, #71c9ce 20px, #a6e3e9 30px, #e3fdfd 40px);  }</style><body>  <div class="div1"></div></body>
复制代码



  • background-image: repeating-radial-gradient  重复径向渐变


<style>  .div1 {    width: 100px;    height: 100px;
background-color: black; background-image: repeating-radial-gradient(circle, #90ade4 ,#3350ba 20%); }</style><body> <div class="div1"></div></body>
复制代码



背景定位   background-position


在讲以下内容之前,我们先科普一下一个元素所涉及的三个盒子,请看图↓



上图三个盒子分别为 content-box(内容盒子)、padding-box(内边距盒子)和 border-box(边框盒子)。


  • border-box  即所设置元素的 border 所占的区域,位于 padding 和 content 的外层

  • padding-box  即所设置元素的 padding 所占的区域,位于 border的内层、content 的外层

  • content-box 元素的 padding 所占区域包围着的即为 content


background-position 默认的定位为 padding-box 盒子的左上角。



其属性值可设置为

(1)百分比(%)

(2)像素(px)

(3)位置(top | right | bottom | left | center)


在只设置一个值的时候,另外一个值默认为 center 或 50% 。padding-box 盒子的左上角坐标为 (0, 0) / (left, top),右下角为 (100, 100) / (right, bottom)。


<style>  .div1 {    width: 100px;    height: 100px;
background-image: url('img1'); background-size: 50%; background-repeat: no-repeat; background-position: right; }</style><body> <div class="div1"></div></body>
复制代码



背景重复  background-repeat


background-repeat

 除了常见的几个 repeat、repeat-x,repeat-y 以及 no-repeat 以外,还在 CSS3 中新加了两个值:space 和 round。其兼容性如下图所示:



  • 背景图片小于容器时

  • background-repeat:space   在保证不缩放的前提下尽可能多的重复图片,并等分图片中间的空隙


  • background-repeat:round   在尽可能多的重复图片的前提下,拉伸图片以铺满容器



  • 背景图片大于容器时



  • background-repeat:round  缩小图片以铺满容器,长宽与容器尺寸一致(未按比例缩放,图片极有可能变形)

  • background-repeat:space  在不缩放的前提下裁剪图片,只保留在容器内的部分



背景相对位置  background-origin


background-origin

  属性规定 background-position 属性相对于什么位置来定位。属性值有 content-box 、padding-box 、border-box  三个,默认为 padding-box。其兼容性如下:



  • background-origin: content-box  (下图为设置 padding: 20px )



  • background-origin: padding-box


  • background-origin: border-box



背景绘制区域  background-clip


background-clip

 属性规定背景的绘制区域。默认值为 border-box,其属性值同 background-origin 一样,不过表现大不相同。其兼容性如下:



  • background-clip: content-box


  • background-clip: padding-box


  • background-clip: border-box


背景大小  background-size


感觉这个属性很常见吧,其实它也是 CSS3 中新加的属性。CSS2.1 中,背景图片大小是无法设置的。background-size 除了常见的设置大小和百分比之外,还有两个特殊的属性:contain  和 cover


  • background-size: contain   图片长宽不相同时,把图片按比例缩小至较长的一方完全适应内容区域为止,多用于背景图片比元素大的情况。


  • background-size: cover   图片长宽不相同时,把图片按比例放大至较短的一方完全适应内容区域为止,以使背景图像完全覆盖背景区域,多用于背景图片比元素小的情况。


背景固定   background-attachment


有时候在一些网站上会看到,滚动页面的时候,背景图片是固定的。那就是使用 background-attachment: fixed  做到的。


  • background-attachment: fixed    背景固定

  • background-attachment: scroll    背景随页面滚动而滚动(默认)


扩展属性   background: element


一个特殊的扩展属性,可以将某个元素设置为另一元素的背景。惊不惊喜,意不意外!不过这个属性只有 FireFox 4+ 的浏览器可以使用,并且需要加上浏览器前缀。


  • background: element(#id)

  • demo1   作为背景的是非图片元素时,背景样式与原元素相同


<style>  .div {    width: 200px;    height: 200px;    background: element(#button)  no-repeat;    background: -moz-element(#button)  no-repeat;  }  #button {    width: 150px;    height: 20px;    margin: 50px;    color: #0470f4;  }</style><body>  <div class="div1">    <button id='button'>这是按钮</button>  </div></body>
复制代码



  • demo2  当设置为背景的元素是图片时,背景图不会随原图的大小样式改变而改变,不过平铺等背景样式依然是支持的


<style>  .div {    width: 200px;    height: 200px;    border: 10px dashed #0ff;    background: element(#img1);    background: -moz-element(#img1);  }  #img1 {    width: 50px;  }</style><body>  <div class="div1">    <img id='img1' src='img1' />  </div></body>
复制代码


结语


CSS 中还有许许多多的我们未知的东西,我们正在一点点探索,期待与你同行。如果你也有什么新发现,欢迎与我们一起讨论~



头图:Unsplash

作者:亚格

原文:https://mp.weixin.qq.com/s/TIOdVo97KUhoDv4X0dhmtQ

原文:你可能不是那么了解的 CSS Background

来源:政采云前端团队 - 微信公众号 [ID:Zoo-Team]

转载:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2021-03-12 23:163395

评论

发布
暂无评论
发现更多内容

泛谈传统运营商借鉴电商模式

鲸品堂

电商 运营商 通信运营商 电信运营商

华为云CDN同舟计划

科技云未来

太牛了!这份什么神仙级Spring Cloud Alibaba全套笔记,从入门到实战,全方位讲解微服务技术栈!

Geek_Yin

程序员 阿里 架构师 spring cloud alibaba #java

MobTech MobLink功能说明及应用创建

MobTech袤博科技

开发 短链接 跳转访问网页

低学历能通过Java培训学习吗?

小谷哥

什么样的人适合参加Web前端培训

小谷哥

我用开天平台做了一个字符串检查API,hin 简单~~

华为云开发者联盟

云计算 API 华为云

发展场景金融需要重视生态能力建设,加深对场景的渗透程度

易观分析

金融 客户 场景生态建设

学习WEB前端去哪里比较好

小谷哥

如何通过OpenHarmony的音频模块实现录音变速功能?

OpenHarmony开发者

OpenHarmony

【数据结构实践】简单实现Python自定义队列

迷彩

数据结构 算法 队列 8月月更

向量数据库公司 Zilliz 完成 6000 万美元 B+ 轮融资

Zilliz

融资 数据库·

2021年中国智能驾驶行业洞察

易观分析

自动化 智能驾驶

数字藏品APP开发定制

开源直播系统源码

软件开发 数字藏品 数字藏品开发 数字藏品系统

一个月闭关直接面进阿里P7,这份Java面试指导手册是真的牛逼

收到请回复

Java 程序员 语言 & 开发

死磕它七年“腾讯限量版”Java架构笔记,要个40k不过分吧?

Geek_Yin

编程 程序员 涨薪 架构师 #java

怎么选择合适自己的web编程培训机构?

小谷哥

RadonDB MySQL Kubernetes 2.2.1 发布!

RadonDB

MySQL 数据库 Kubernetes RadonDB

测试 SAP 电商云 Spartacus UI 3.4.x 和 4.3.x 的 guest checkout 功能

汪子熙

typescript 前端 angular Spartacus 8月月更

大数据培训机构学习会不会有点难?

小谷哥

阿里云 ACK One 多集群管理全面升级:多集群服务、多集群监控、两地三中心应用容灾

阿里巴巴云原生

阿里云 容器 分布式 云原生 集群

开源一夏 |log4j2漏洞复现及修复

六月的雨在InfoQ

开源 Log4j 2 Log4j2 漏洞 8月月更

一箭双雕!刷完阿里P8架构师spring学习笔记+源码剖析,涨薪8K

Geek_Yin

编程 程序员 springboot #java Spring Java

兆骑科创创新创业服务平台,投融资对接,线上直播路演

兆骑科创凤阁

TDengine 3.0 三大创新详解

TDengine

数据库 tdengine 时序数据库

“智慧”有为!AntDB数据库助力某省高速率先完成自主可控建设

亚信AntDB数据库

AntDB 国产数据库 aisware antdb

数字无限 云领未来 | 华为云&赛意信息线上直播约定您

极客天地

2022秋招,Java岗最全面试攻略,吃透25个技术栈Offer拿到手软

Geek_Yin

程序人生 java面试 程序猿 #java Java面试八股文

狂刷《Java权威面试指南(阿里版)》,冲击“金九银十”有望了

Geek_Yin

阿里 Java 面试 架构师 #java 程序员面试、

牛客网论坛最具争议的Java面试成神笔记,GitHub已下载量已过百万

Geek_Yin

编程 程序员 牛客网 #java Java面试八股文

行业分析| 调度行业未来趋势

anyRTC开发者

音视频 调度 快对讲 语音对讲 视频对讲

你可能不是那么了解的 CSS Background_语言 & 开发_政采云前端团队_InfoQ精选文章