具有 CSS 属性的解决方案
我们可以通过使用多个背景在同一元素上组合背景图像和 CSS3 渐变。
在下面的示例中，我们设置 <div> 的高度和宽度并添加背景。
然后，我们使用 background-image 属性的“url”值设置背景图像回退。
最后，我们为可以处理它们的浏览器设置了背景图像和渐变。
此外，将背景大小设置为“100%”。
在同一元素上使用多个背景的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
height: 150px;
width: 150px;
background: lightgreen;
background-image: url("/build/images/emojin-01.svg");/* fallback */
background-image: url("/build/images/emojin-01.svg"), linear-gradient(lightgreen, lightblue);
background-size: 100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
我们可以通过设置多个背景图像来获得类似的结果。
第一个定义的背景图像将在顶部，最后一个定义的背景图像将在底部。
在以下示例中，我们为 <span> 使用 display 属性的“inline-block”值并设置其背景和背景大小。
然后，我们添加背景图像。
将同一元素上的背景图像和渐变与多个背景图像组合的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
span {
display: inline-block;
height: 150px;
width: 150px;
background: #eb01a5;
background-size: contain;
background-image: url("/build/images/emojin-01.svg"), linear-gradient(pink, purple);
background-image: url("/build/images/emojin-01.svg"), -webkit-gradient(linear, left top, left bottom, from(pink), to(purple));
background-image: url("/build/images/emojin-01.svg"), -moz-linear-gradient(top, pink, purple);
}
</style>
</head>
<body>
<span></span>
</body>
</html>
如果我们希望图像显示在渐变上方，请将 URL 放在渐变之前。
在渐变上方显示图像的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.background-gradient {
background: url('/build/images/logo-color-w3.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('/build/images/logo-color-w3.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('/build/images/logo-color-w3.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('/build/images/logo-color-w3.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('/build/images/logo-color-w3.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('/build/images/logo-color-w3.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
height: 500px;
width: 500px;
background-position: center;
}
</style>
</head>
<body>
<div class="background-gradient"></div>
</body>
</html>
在下一个示例中，我们设置 <div> 的宽度和高度，并通过 background 属性指定背景图像和渐变。
将背景图像和渐变与 background 属性组合的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
width: 100%;
height: 100px;
background: url("/build/images/logo-color-w3.png") no-repeat left top, linear-gradient(#F7CFB6, #F08E86);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在我们的最后一个示例中，我们以相同的方式组合背景图像和渐变，但使用“中心”值。
此外，我们将背景大小设置为其“包含”值。
组合背景图像和渐变的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
width: 100%;
height: 100px;
background: url("/build/images/emojin-01.svg") no-repeat center, linear-gradient(135deg, lightgreen 0, lightblue 100%);
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS 渐变用于样式元素。
它们显示两种或者多种已定义颜色之间的平滑过渡。
但是你有没有试过在同一个元素上结合 CSS3 渐变和背景图像？
如果不是，那么这个片段适合你。
日期：2020-06-02 22:14:55 来源：oir作者：oir