gpt4 book ai didi

css - 移动浏览器的线性渐变和 url-image?

转载 作者:技术小花猫 更新时间:2023-10-29 11:03:41 25 4
gpt4 key购买 nike

我想要一个图像作为背景,还有一个 CSS 线性渐变:

background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);

我在桌面浏览器(Firefox 44.x;IE 10;Chrome;Safari)上没有问题,但不适用于移动浏览器(我用我的 iphone 5、(9.x) 和 safari、应用程序进行了测试火狐、应用程序 chrome)。

我用这个:

background-image: url("/site/grigliatrasparente.png"), -moz-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -webkit-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -o-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -ms-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#404040), color-stop(2%,#dfbb80),color-stop(98%,#dfbb80),color-stop(100%,#404040));
background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#404040, endColorstr=#dfbb80);
background-color: #dfbb80;

有什么问题?

非常感谢,对不起我的英语:)

最佳答案

早期CSS3多背景的时候,问题是渐变代替了背景img,后来问题解决了,在mozilla-developer你可以找到一个像你的想法一样工作正常的例子,也可以移动。
你的 css 看起来不错,尽管你可以通过 autoprefixr 运行它来更新前缀。
在考虑其中一个前缀可能会干扰您的显示的可能性之前,首先检查您的手机的功能示例(当然还有 css)并为背景图像设置背景重复和背景位置。

关于css - 移动浏览器的线性渐变和 url-image?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35778189/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com