CSS-背景图片 | background-image-低调大师

CSS-背景图片 | background-image

2018-09-11 657

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-originCSS属性定义。

如果无法绘制指定的图像（例如，无法加载指定的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前缀的实验性渐变。

微信关注我们

原文链接：https://yq.aliyun.com/articles/638678

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

CSS-背景颜色 | background-color

属性中的background-color会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一 /* Keyword values */ background-color: red; /* Hexadecimal value */ background-color: #bbff00; /* Hexadecimal value with alpha channel */ background-color: #11ffee00; /* 00 - fully transparent */ background-color: #11ffeeff; /* ff - fully opaque */ /* RGB value */ background-color: rgb(255, 255, 128); /* RGBA value or RGB with alpha channel */ background-color: rgba(117, 190, 218, 0.0); /* 0.0 - fully transparent */ background-color: ...

2018-09-11

960

CSS-背景来源 | background-origin

background-origin规定了指定背景图片background-image属性的原点位置的背景相对区域. /* Keyword values */ background-origin: border-box; background-origin: padding-box; background-origin: content-box; /* Global values */ background-origin: inherit; background-origin: initial; background-origin: unset; 请注意background-origin被忽略时background-attachment是fixed... 注意：当使用background-attachment为fixed时，该属性将被忽略不起作用。初始值 padding-box 适用元素 all elements. It also applies to ::first-letter and ::first-line. 是否是继承属性 no 适用媒体 visual 计算值 as spec...

2018-09-11

618

发表评论

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。