只是一个非常快的问题,我遇到了一些麻烦 - 即背景 css 元素的排序。
我有以下内容:
background-color: #3C3E89; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#3C3E89, #6265E4); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#3C3E89, #6265E4); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#3C3E89, #6265E4); /* For Firefox 3.6 to 15 */
background: linear-gradient(#3C3E89, #6265E4); /* Standard syntax */
background-image: url('../images/logo.png');
background-size: cover;
出于某种原因,png - 尽管它具有透明层 - 覆盖了我希望它所在的线性渐变。
我有点 Root ,看看正确的方法是什么,尝试过,但没有运气。我想知道是否有人有一种久经考验的方法可以在渐变背景上叠加 png...
我相信每个人都会对我尖叫说这是一个重复的问题 - 但除非我遗漏了什么,否则我无法成功实现他们的建议。
更新:
我也试过以下方法:
background-image:
-webkit-linear-gradient(#3C3E89, #6265E4), /* For Safari 5.1 to 6.0 */
-o-linear-gradient(#3C3E89, #6265E4), /* For Opera 11.1 to 12.0 */
-moz-linear-gradient(#3C3E89, #6265E4), /* For Firefox 3.6 to 15 */
linear-gradient(#3C3E89, #6265E4), /* Standard HTML Syntax */
url('../images/logo.png');
还有……
background:
-webkit-linear-gradient(#3C3E89, #6265E4), /* For Safari 5.1 to 6.0 */
-o-linear-gradient(#3C3E89, #6265E4), /* For Opera 11.1 to 12.0 */
-moz-linear-gradient(#3C3E89, #6265E4), /* For Firefox 3.6 to 15 */
linear-gradient(#3C3E89, #6265E4), /* Standard HTML Syntax */
url('../images/logo.png');
最佳答案
您正在通过设置 background-image
覆盖背景。相反,您需要使用多个背景:
background-image: url('../images/logo.png'), linear-gradient(#3C3E89, #6265E4);
根据 documentation背景是从最近到最远绘制的。因此,在您的情况下,图像应该首先通过渐变绘制。
关于带有图像叠加的 CSS 背景渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47001581/