你可能不是那么了解的 CSS Background
source link: https://www.zoo.team/article/css-background
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
前言
Background,写过 CSS 的朋友们肯定都知道这个属性的作用,顾名思义,背景嘛。 MDN 中对其的定义如下:
Background是一种 CSS 简写属性,一次性定义了所有的背景属性,包括 color, image, origin 还有 size, repeat 方式等等。
我们首先讲一下 Background 的日常语法:
-
Background
可以使用简写或者单独设置其中一项:
-
简写语法
- 官方推荐顺序为: background: background-color,background-image,background-repeat,background-attachment,background-position;
- 不强制要求书写顺序
- 单独设置样式
-
简写语法
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 )
linear-gradient( [ | to ,]? [, ]+ )
:用角度值指定渐变的方向
:[left | right] || [top | bottom]
: [ | ]?
- 例: background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);
<style> .div1 { background - image: linear-gradient(#71c9ce, #e3fdfd);; } </style> <body> <div class="div1"></div> </body>
-
background-image: radial-gradient
径向渐变 - radial-gradient 用法如下:(详见 MDN )
radial-gradient( [ [ellipse | circle] || [ | ] [ at ]? ] ? [ , ]+ )
= closest-corner | closest-side | farthest-corner | farthest-side
: [ | ]?
- 例: background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
<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 padding-box
<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:space
在不缩放的前提下裁剪图片,只保留在容器内的部分
-
background-repeat:round
缩小图片以铺满容器,长宽与容器尺寸一致(未按比例缩放,图片极有可能变形)
-
背景相对位置 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 中还有许许多多的我们未知的东西,我们正在一点点探索,期待与你同行。如果你也有什么新发现,欢迎与我们一起讨论~
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK