简写

background:orange url('https://email.caniuse.cn/assets/images/og.png') center/cover no-repeat;

展开

background-image:url('https://email.caniuse.cn/assets/images/og.png'); background-color: orange; background-position: center; background-repeat: no-repeat; background-size: cover;

简写:大小 + 位置

background:orange url('https://email.caniuse.cn/assets/images/og.png') 20px 20px/75px 75px no-repeat;

展开:大小 + 位置

background-image:url('https://email.caniuse.cn/assets/images/og.png'); background-color: orange; background-position: 20px 20px; background-repeat: no-repeat; background-size: 75px 75px;

多个简写

background: url('https://email.caniuse.cn/assets/images/og.png') top right no-repeat, url('https://email.caniuse.cn/assets/images/og.png') bottom left no-repeat, url('https://email.caniuse.cn/assets/images/og.png') center center no-repeat, red;

多个展开

background-image: url('https://email.caniuse.cn/assets/images/og.png'), url('https://email.caniuse.cn/assets/images/og.png'), url('https://email.caniuse.cn/assets/images/og.png'); background-position: top right, bottom left, center center; background-repeat: no-repeat,no-repeat,no-repeat; background-color: red;

多个简写:大小 + 位置

background: url('https://email.caniuse.cn/assets/images/og.png') 100% 100% / 100px 100px no-repeat, url('https://email.caniuse.cn/assets/images/og.png') right center no-repeat, url('https://email.caniuse.cn/assets/images/og.png') center center no-repeat, red;

多个展开:大小 + 位置

background-image: url('https://email.caniuse.cn/assets/images/og.png'), url('https://email.caniuse.cn/assets/images/og.png'), url('https://email.caniuse.cn/assets/images/og.png'); background-position: 100% 100%, right center, center center; background-size:100px 100px, auto, auto; background-repeat: no-repeat,no-repeat,no-repeat; background-color: red;

div 上的 background 属性

<div class="backgroundtest" background="https://email.caniuse.cn/assets/images/og.png">

<div> 上的 background 属性 display:table

<div class="backgroundtest" style="display:table;" background="https://email.caniuse.cn/assets/images/og.png">

<table> 标签上的 background 属性

<table class="backgroundtest" background="https://email.caniuse.cn/assets/images/og.png"><tr><td></td></tr></table>

<tr> 标签上的 background 属性

<table class="backgroundtest"><tr background="https://email.caniuse.cn/assets/images/og.png"><td></td></tr></table>

<td> 标签上的 background 属性

<table class="backgroundtest"><tr><td background="https://email.caniuse.cn/assets/images/og.png"></td></tr></table>

background-clip: border-box(这是默认值)

背景延伸到边框后面。

background-clip: padding-box

背景延伸到边框的内边缘。

background-clip: content-box

背景延伸到内容框的边缘。

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

背景图像从填充边缘的左上角开始

background-origin: border-box

背景图像从边框的左上角开始。

background-origin: content-box

背景图像从内容的左上角开始。

background-blend-mode: lighten

background-blend-mode: color-dodge

background-blend-mode: luminosity

background-blend-mode: screen

background-blend-mode: color-burn

background-blend-mode: color

线性渐变(到透明)

background-image: linear-gradient(to left, transparent, black);

线性渐变(2 种颜色)

background-image: linear-gradient(black,orange);

线性渐变(3 种颜色)到右侧

background-image: linear-gradient(to right, black,orange,purple);

线性渐变(4 种颜色)到右下方

background-image: linear-gradient(to bottom right, black,orange,white,purple);

径向渐变(2 种颜色)

background-image: radial-gradient(black,orange);

径向渐变(3 种颜色)

background-image: radial-gradient(black,orange,purple);

径向渐变(4 种颜色)

background-image: radial-gradient(black,orange,white,purple);

激进径向 1

background: radial-gradient( ellipse at center, rgba(255,255,255,1) 31%, rgba(255,255,255,1) 32%, rgba(241,111,92,1) 32%, rgba(246,41,12,1) 51%, rgba(231,56,39,1) 100%);

激进径向 2

background: radial-gradient( ellipse at center, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 51%, rgba(254,254,254,1) 100%);

原生 Android Samsung 电子邮件应用程序应用程序不将背景图像识别为资源,至少需要一个 html <img> 才能触发应用程序下载背景图像。