CSS-背景图片 | background-image
background-image
CSS属性的元件上设置一个或多个背景图像。
/* Single value */
background-image: url('https://example.com/bck.png');/* Multiple values */
background-image: url('https://example.com/top.png'), url('https://example.com/bottom.png');/* Keyword value */
background-image: none;/* Global values */
background-image: inherit;
background-image: initial;
background-image: unset;
背景图像在堆叠上下文层上绘制。指定的第一个图层被绘制为与用户最接近。
元素的边界然后被绘制在它们的顶部,然后被background-color
绘制在它们下面。如何绘制图像相对于框和它的边界由background-clip
和background-origin
CSS属性定义。
如果无法绘制指定的图像(例如,无法加载指定的URI所指示的文件),那么浏览器会像处理none
值一样处理它。
注意:即使图像不透明,在正常情况下也不会显示颜色,Web开发人员应该始终指定一个background-color
。如果图像无法加载 - 例如,当网络关闭时,背景颜色将被用作回退。
双引号失败时,单引号可能会绕过URL。
初始值 |
none |
---|---|
适用元素 |
all elements. It also applies to ::first-letter and ::first-line. |
是否是继承属性 |
no |
适用媒体 |
visual |
计算值 |
as specified, but with url values made absolute |
Animation type |
discrete |
正规顺序 |
the unique non-ambiguous order defined by the formal grammar |
语法
每个背景图像被指定为关键字none
或<image>
值。
要指定多个背景图片,请提供多个值,并用逗号分隔:
background-image:linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),url('https://mdn.mozillademos.org/files/7693/catfront.png');
值
none
是一个关键字表示没有图像。<image>
是<image>
表示要显示的图像。可以有几个,用逗号分隔,因为支持多个背景。
正式语法
<bg-image>#where
<bg-image> = none | <image>
where
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
where
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
where
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?
<length-percentage> = <length> | <percentage>
示例
请注意,星形图像是部分透明的,并在cat图像上分层。
HTML
<div><p class="catsandstars">This paragraph is full of cats<br />and stars.</p><p>This paragraph is not.</p><p class="catsandstars">Here are more cats for you.<br />Look at them!</p><p>And no more.</p>
</div>
CSS
p {font-size: 1.5em;color: #FE7F88;background-image: none;background-color: transparent;
}div {background-image:url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}.catsandstars {background-image:url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png");background-color: transparent;
}
结果
规范
Specification |
Status |
Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3The definition of 'background-image' in that specification. |
Candidate Recommendation |
From CSS2 Revision 1, the property has been extended to support multiple backgrounds and any <image> CSS data type. |
CSS Level 2 (Revision 1)The definition of 'background-image' in that specification. |
Recommendation |
From CSS1, the way images with and without intrinsic dimensions are handled is now described. |
CSS Level 1The definition of 'background-image' in that specification. |
Recommendation |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic Support |
1 |
12 |
1.01 |
4 |
3.5 |
1.0 |
Multiple backgrounds |
1.0 |
12 |
3.6 |
9.0 |
(Yes) |
1.3 |
Gradients |
1.02 |
12 |
3.63 |
10 |
114 |
4.02 |
SVG images |
8.0 |
12 |
4.0 |
9.0 |
9.5 |
5.05 |
element() |
No |
No |
(Yes)6 |
No |
No |
No |
image-rect() |
No |
No |
(Yes) -moz- 7 |
No |
No |
No |
Any <image> value |
(Yes) |
? |
No |
? |
? |
? |
Feature |
Android |
Chrome for Android |
Edge mobile |
Firefox for Android |
IE mobile |
Opera Android |
iOS Safari |
---|---|---|---|---|---|---|---|
Basic Support |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
Multiple backgrounds |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
Gradients |
(Yes) |
(Yes)2 |
(Yes) |
(Yes)3 |
(Yes) |
(Yes)4 |
(Yes)2 |
SVG images |
No |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
5.05 |
element() |
No |
No |
No |
(Yes)6 |
No |
No |
No |
image-rect() |
No |
No |
No |
(Yes) -moz- 7 |
No |
No |
No |
Any <image> value |
(Yes) |
(Yes) |
? |
No |
? |
? |
? |
1. 如果browser.display.use_document_colors
用户偏好about:config
设置为false
,则不会显示背景图像。
2. 某些版本仅支持以-webkit
,-moz
,或为-o
前缀的实验性渐变。
CSS-背景图片 | background-image相关推荐
- CSS背景图片background如何改变大小以及样式设置
background-color 使用的背景色 background-size 背景图片的尺寸. background-size: length|percentage|cover|contain; b ...
- css背景图片、圆角、盒子阴影、浮动
一.css背景图片 1.概述 背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb ...
- css背景图片添加url_CSS背景图片–如何向您的Div添加图片URL
css背景图片添加url Say you want to put an image or two on a webpage. One way is to use the background-imag ...
- css 背景图片的虚化
css 背景图片的虚化 背景虚化时出现页面内容也被虚化的情况,使用伪类::before body .bg {position: relative;width: 100%;height: 100%;ov ...
- html背景图片不重叠铺满,css背景图片怎么铺满
该方法适用于所有品牌的电脑. CSS设置拉伸背景图片铺满屏幕 新建一个html文件,命名为test.html,用于讲解CSS中如何设置拉伸背景图片铺满屏幕. 在test.html文件内,使用div标签 ...
- 完美的css背景图片全屏显示,能比例缩小,不留空白
简介:完美的css背景图片全屏显示,能比例缩小,不留空白,我们之前已经知道了可调整大小的背景图片的概念.但是读者DougShults发给了我一个链接,其中使用了非常酷的技术,我觉得这种技术要比之前的任 ...
- CSS背景图片定位(background-position,css sprit,背景定位,background-imag
CSS背景图片定位(background-position,css sprit,背景定位,background-imag 标签: 杂谈 分类: css 在CSS中,背景图片的定位方位有3种: 1)关键 ...
- 前端工程师实战17:详解CSS背景图片、雪碧图
大家好,全套HTML和CSS入门与实战课程正在我的专栏<HTML与CSS入门与进阶>更新中!按知识点循序渐进,按照顺序读下来绝对比搜索网上教程更加紧凑!内容通俗易懂,图文并茂,欢迎订阅! ...
- CSS背景(background)
CSS背景backgroud 背景颜色(color) 背景图片(image) 背景平铺(repeat) 背景位置(position)重点 背景附着 背景简写 背景透明(CSS3) 背景总结 理解 背景 ...
- html 文字在背景图片上,如何让文字作为CSS背景图片显示
在实际开发中,有时候希望文字内容可以作为背景图片显示,一方面是希望利用背景图片的优势,例如可以平铺,另外一方面是常见的替换元素不能使用伪元素创建文字,此时只能寄希望与背景图. 关键如何把文字变成背景图 ...
最新文章
- 算法博士平均月入4万,数据可视化技能全球吃香 | 2020年《顶级数据团队建设全景报告》重磅发布...
- 元学习—Meta Learning的兴起
- Python类方法和静态方法
- 滴滴市值超百度 达到791亿美金
- flask-alchemy-pagination
- mysql 随机槽_mysql怎样高效率随机获取n条数据
- 华为认证Datacom和Routing Switching方向的优势
- 为什么我们需要表明身份:EV证书的价值
- 100层摔两个鸡蛋的问题
- urllib库的学习与使用
- Python Tkinter——数字拼图游戏
- 问小鱼如何看?小米机器人之铁蛋!
- Scratch创作-从入门到精通
- TP-LINK WR740N V5.7刷OpenWrt的一些经验
- 基于单片机的计算器系统设计(#0404)
- js之鼠标的拖曳效果
- 从零开发H5可视化搭建项目
- 【WordPress】ITVGD的WordPress安装与体验
- batplot:图示Bland-Altman一致性分析
- 【ChatGPT】这是一篇ChatGPT写的关于Python的文章