Фон CSS PNG с полупрозрачными прозрачными на градиенте показывает белый фонCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Фон CSS PNG с полупрозрачными прозрачными на градиенте показывает белый фон

Сообщение Anonymous »

Если вы посмотрите на эту скрипку с браузером Android, вы увидите, что PNG, который составляет цветы, имеет белый фон. Android Browser. Я искал эту проблему, но единственное, что я могу найти, - это проблема с полосами PNG и связанным с программированием приложений Android. , и я нахожу очень странным, что это происходит. Я не могу использовать непрозрачный фон из-за различий в градиентах в разных браузерах. /> [*] Я уже пытался использовать «множественные» фоны, расположенные в месте 0PX 0PX , но это не работает.
Я попытался добавить градиент к дивированию с цветами, но это не удалось Слишком и сломался в других браузерах. Даже Nokia N95 делает это правильно. < /P>
версия Android, на которую я тестирую, является Android 2.3.4 (Sony Ericsson Xperia Arc S Lt18i). < /P>


$(function(){
$('#photobox img:gt(0)').hide();
setInterval(function(){
$('#photobox :first-child').fadeOut(1500)
.next('#photobox img').fadeIn(1500)
.end().appendTo('#photobox');
},
5000);
});< /code>
body div.econtainer {
border-bottom-style:solid;
border-bottom-color:#fff;
border-bottom-width:1px;
position:absolute;
top:0px;
left:0px;
width:100%;
height:200px;
max-height:200px;
margin-top:30px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDE3OCwyMDEsMCwxKTsiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDEzMywxNTEsMCwxKTsiIC8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIC8+PC9zdmc+);
background-image: linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -o-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -moz-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -webkit-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -ms-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.0, #859700),
color-stop(0.4, #B2C900)
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B2C900', endColorstr='#859700',GradientType=0 ); /* IE6-8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#B2C900,EndColorStr=#859700)"
padding:0px;
overflow:visible;
-webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.20);
-moz-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.20);
box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.20);
}
body div.econtainer div.makeitnice {
position:relative;
width:890px;
max-width:1200px;
min-width:1200px;
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
overflow:visible
}
body div.econtainer div.makeitnice div.flowers {
position:absolute;
top:0px;
right:30px;
background-color: transparent;
background-image: url(http://www.elsediendegroot.nl/wp-conten ... lowers.png);
width:790px;
height:200px;
}
body div.econtainer div.makeitnice div.handtekening {
position:absolute;
width:314px;
height:69px;
left:161px;
top:114px;
background-image:url(http://www.elsediendegroot.nl/wp-conten ... kening.png);
}
body div.econtainer div.makeitnice div#quote h3{
position:absolute;
width:314px;
left:161px;
top:10px;
color:#FFF;
font-family: "Helvetica Neue",Helvetica, Trebuchet MS, Verdana, sans, tahoma, arial;
font-size:14pt;
font-weight:100;
}
body div.econtainer div.makeitnice div.photoframe {
position:absolute;
top:-30px;
right:140px;
background-color:#FFF;
width:556px;
height:364px;
min-width:556px;
min-height:364px;
max-width:556px;
max-height:364px;
}
body div.econtainer div.makeitnice div.photoframeshadow {
background-image: url(http://www.elsediendegroot.nl/wp-conten ... shadow.png);
position:absolute;
top:-30px;
right:121px;
width:590px;
z-index:-100;
height:401px;
min-width:590px;
min-height:401px;
max-width:590px;
max-height:401px;
}
body div.econtainer div.makeitnice div.photoframe div.photoshow {
position:relative;
}
body div.econtainer div.makeitnice div.photoshow img {
position:absolute;top:0px;
left:10px;right:10px;
width:536px;
height:355px;
}< /code>





“abcdefghijklmn alsdjkflk asldfjalsdjf asldkjfalsdfjla”


Изображение

Изображение

Изображение

Изображение






< /code>
< /div>
< /div>
< /p>
Это то, что я вижу в скрипке в браузере Android на телефоне :


Подробнее здесь: https://stackoverflow.com/questions/113 ... nt-shows-a
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
  • CSS граница на PNG-изображении с прозрачными частями
    Anonymous » » в форуме CSS
    0 Ответы
    16 Просмотры
    Последнее сообщение Anonymous
  • CSS граница на изображении PNG с прозрачными частями
    Anonymous » » в форуме Html
    0 Ответы
    2 Просмотры
    Последнее сообщение Anonymous
  • CSS граница на изображении PNG с прозрачными частями
    Anonymous » » в форуме CSS
    0 Ответы
    3 Просмотры
    Последнее сообщение Anonymous
  • Android Studio: Странный белый округлый прямоугольник под прозрачными тканями
    Anonymous » » в форуме Android
    0 Ответы
    8 Просмотры
    Последнее сообщение Anonymous
  • Странный белый округлый прямоугольник под прозрачными тканями
    Anonymous » » в форуме Android
    0 Ответы
    8 Просмотры
    Последнее сообщение Anonymous

Вернуться в «CSS»