Я изменил фон моего дискуссионного форума, используя CSS ниже
http://forum.antinovaordemmundial.com
html {
background: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg) no-repeat center center fixed;
background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: fixed;
background-position-x: 50%;
background-position-y: 50%;
background-origin: initial;
background-clip: initial;
background-color: initial;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Изображение 1600x711 и 88k. Прокрутка страниц сейчас очень медленная. Является ли CSS проблематичным или изображение должно быть каким-то образом меньше?
Изменить: я попытался перейти на:
body {
color: #000;
font-family: Verdana, Arial, Sans-Serif;
font-size: 13px;
text-align: center; /* IE 5 fix */
line-height: 1.4;
background-attachment: fixed;
background-clip: initial;
background-color: #51010E;
background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
background-origin: initial;
background-position: initial initial;
background-repeat: initial initial;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
Но при прокрутке все еще очень медленно.
Проблема исчезает для меня, когда я удаляю свойство background-size. Я думаю, что именно масштабирование большого изображения вызывало проблему. Если это не сработает, просто удалите фоновое изображение. Тем не менее, я никогда не слышал о большом фоновом изображении, вызывающем задержку раньше.
У меня была такая же проблема и я решил использовать этот плагин jQuery: http://srobbin.com/jquery-plugins/jquery-backstretch/
Он не использует какое-либо свойство CSS3, но он отлично работает и не имеет проблем с производительностью в Chrome 13 или Firefox 6.
Я думал, что просто буду участвовать здесь. Вместо использования background-attachment: fixed; использование: до и положение: фиксировано; проблема отсортирована. Я столкнулся с этой проблемой.
Подробнее здесь: http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property
Кроме того, применение следующего стиля к тегу html значительно улучшает частоту кадров в браузерах WebKit, включенный Chrome:
-webkit-transform: translate3d(0,0,0);
Это работает во всех случаях с (большими) фоновыми фотографиями и изменчивой прокруткой, насколько я могу судить.
Сжатие изображения (уменьшение размера), решение моей проблемы, я настоятельно рекомендую использовать инструмент, например Инструмент оптимизации радикальных изображений (RIOT), очень эффективно и легко.
В linux это можно сделать, используя GIMP, вы также можете удалить метаданные изображения для уменьшения размера, используйте инструмент, например exiftool.