Другое событие NullPointerException
возникает, когда объявляется массив объектов, а затем сразу же пытается разыменовать его внутри.
String[] phrases = new String[10];
String keyPhrase = "Bird";
for(String phrase : phrases) {
System.out.println(phrase.equals(keyPhrase));
}
Этот конкретный NPE можно избежать, если порядок сравнения отменяется ; а именно, использовать .equals
для гарантированного непустого объекта.
Все элементы внутри массива инициализируются их общим начальным значением ; для любого типа массива объектов, это означает, что все элементы null
.
Вы должны инициализировать элементы в массиве перед доступом или разыменованием их.
String[] phrases = new String[] {"The bird", "A bird", "My bird", "Bird"};
String keyPhrase = "Bird";
for(String phrase : phrases) {
System.out.println(phrase.equals(keyPhrase));
}
См. мой ответ на этот вопрос: Обнаружение поддержки привязки к фону: исправлено?
Благодаря усилиям Винсента и работы Joey Hayes, у меня есть этот codepen , работающий на мобильном телефоне Android, который поддерживает несколько фиксированных фонов
HTML:
<html>
<body>
<nav>Nav to nowhere</nav>
<article>
<section class="bg-img bg-img1">
<div class="content">
<h1>Fixed backgrounds on a mobile browser</h1>
</div>
</section>
<section class="solid">
<h3>Scrolling Foreground Here</h3>
</section>
<section>
<div class="content">
<p>Quid securi etiam tamquam eu fugiat nulla pariatur. Cum ceteris in veneratione tui montes, nascetur mus. Quisque placerat facilisis egestas cillum dolore. Ambitioni dedisse scripsisse iudicaretur. Quisque ut dolor gravida, placerat libero vel,
euismod.
</p>
</div>
</section>
<section class="solid">
<h3>Scrolling Foreground Here</h3>
</section>
<section class="footer">
<div class="content">
<h3>The end is nigh.</h3>
</div>
</section>
</article>
</body>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: "source sans pro";
font-weight: 400;
color: #fdfdfd;
}
body > section >.footer {
overflow: hidden;
}
nav {
position: fixed;
top: 0;
left: 0;
height: 70px;
width: 100%;
background-color: silver;
z-index: 999;
text-align: center;
font-size: 2em;
opacity: 0.8;
}
article {
position: relative;
font-size: 1em;
}
section {
height: 100vh;
padding-top: 5em;
}
.bg-img::before {
position: fixed;
content: ' ';
display: block;
width: 100vw;
min-height: 100vh;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-position: center;
background-size: cover;
z-index: -10;
}
.bg-img1:before {
background-image: url('https://res.cloudinary.com/djhkdplck/image/upload/v1491326836/3balls_1280.jpg');
}
.bg-img2::before {
background-image: url('https://res.cloudinary.com/djhkdplck/image/upload/v1491326840/icebubble-1280.jpg');
}
.bg-img3::before {
background-image: url('https://res.cloudinary.com/djhkdplck/image/upload/v1491326844/soap-bubbles_1280.jpg');
}
h1, h2, h3 {
font-family: lato;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
}
.content {
max-width: 50rem;
margin: 0 auto;
}
.solid {
min-height: 100vh;
width: 100%;
margin: auto;
border: 1px solid white;
background: rgba(255, 255, 255, 0.6);
}
.footer {
background: rgba(2, 2, 2, 0.5);
}
JS / JQUERY
window.onload = function() {
// Alternate Background Page with scrolling content (Bg Pages are odd#s)
var $bgImg = $('.bg-img');
var $nav = $('nav');
var winh = window.innerHeight;
var scrollPos = 0;
var page = 1;
var page1Bottom = winh;
var page3Top = winh;
var page3Bottom = winh * 3;
var page5Top = winh * 3;
var page5Bottom = winh * 5;
$(window).on('scroll', function() {
scrollPos = Number($(window).scrollTop().toFixed(2));
page = Math.floor(Number(scrollPos / winh) +1);
if (scrollPos >= 0 && scrollPos < page1Bottom ) {
if (! $bgImg.hasClass('bg-img1')) {
removeBg( $bgImg, 2, 3, 1 ); // element, low, high, current
$bgImg.addClass('bg-img1');
}
} else if (scrollPos >= page3Top && scrollPos <= page3Bottom) {
if (! $bgImg.hasClass('bg-img2')) {
removeBg( $bgImg, 1, 3, 2 ); // element, low, high, current
$bgImg.addClass('bg-img2');
}
} else if (scrollPos >= page5Top && scrollPos <= page5Bottom) {
if (! $bgImg.hasClass('bg-img3')) {
removeBg( $bgImg, 1, 2, 3 ); // element, low, high, current
$bgImg.addClass('bg-img3');
}
}
$nav.html("Page# " + page + " window position: " + scrollPos);
});
}
// This function was created to fix a problem where the mouse moves off the
// screen, this results in improper removal of background image class. Fix
// by removing any background class not applicable to current page.
function removeBg( el, low, high, current ) {
if (low > high || low <= 0 || high <= 0) {
console.log ("bad low/high parameters in removeBg");
}
for (var i=low; i<=high; i++) {
if ( i != current ) { // avoid removing class we are trying to add
if (el.hasClass('bg-img' +i )) {
el.removeClass('bg-img' +i );
}
}
}
} // removeBg()
Я думаю, что мобильные устройства не работают с фиксированными позициями. Вы должны попробовать с помощью некоторого js-плагина, например skrollr.js (например). С помощью такого типа плагина вы можете выбрать положение своего div (или любого другого) в функции положения полосы прокрутки.
"background-size: cover;" вызывает много проблем во всех мобильных браузерах, кроме Firefox!
Это исправило мою проблему:
/* Mobile first */
body{
background-image: url(bg_mobile.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
}
/* Then tablets, laptops and desktops (768px and up) */
@media screen and (min-width:768px) {
body{
background-image: url(bg.jpg);
background-size: cover;
}
}
Я нашел возможно лучшее решение для эффекта параллакса, которое работает на всех устройствах.
Главное - установить все разделы с z-индексом больше, чем параллакс.
И элемент изображения параллакса для установки фиксированного с максимальной шириной и высотой
body, html { margin: 0px; }
section {
position: relative; /* Important */
z-index: 1; /* Important */
width: 100%;
height: 100px;
}
section.blue { background-color: blue; }
section.red { background-color: red; }
section.parallax {
z-index: 0; /* Important */
}
section.parallax .image {
position: fixed; /* Important */
top: 0; /* Important */
left: 0; /* Important */
width: 100%; /* Important */
height: 100%; /* Important */
background-image: url(https://www.w3schools.com/css/img_fjords.jpg);
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<section class="blue"></section>
<section class="parallax">
<div class="image"></div>
</section>
<section class="red"></section>
Это то, что я делаю, и он работает каждый :)
.container {
background: url(${myImage})
background-attachment: fixed;
background-size: cover;
transform: scale(1.1, 1.1);
}
then ...
@media only screen and (max-width: 768px){
background-size: 100% 100vh;
}
У меня такая же проблема, но теперь она работает. Все, что мне нужно было сделать, это добавить background-size: cover !important;
, и он работает на моем устройстве Android!
Весь код выглядит так:
body.page-id-8 #art-main {
background: #000000 url("link to image") !important;
background-repeat: no-repeat !important;
background-position: 50% 50% !important;
background-attachment: fixed !important;
background-color: transparent !important;
background-size: cover !important;
}
Спасибо большое @taylan derinbay и @Vincent!
Фиксированное позиционирование поддерживается на мобильных устройствах с Android 2.2 и iOS 5.
Вам нужно использовать устройство с окном просмотра на мета и дать фоновое изображение где-нибудь с идентификатором. Затем вы получите этот id с jquery и дадите высоту. И, конечно, 100% ширина
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#main {
background: url(1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body id="main">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
var hgt = $(window).height();
$("#main").css("height", hgt)
</script>
Я опаздываю на вечеринку, но это (невероятно) все еще проблема с 11.05.2017. Вот простое решение, которое также будет работать кросс-платформенно с линейными градиентами:
.backgroundFixed {
background: linear-gradient(160deg, #2db4a8 0%, #13af3d 100%);
background-size: 100vw 100vh;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: -1000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<div class="backgroundFixed"></div>
<div class="paragraphContainer">
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
<p>We're here to make the body scroll</p>
</div>
</body>
</html>
Я нашел отличное решение для фиксированных фонов на мобильных устройствах, не требующих вообще никакого JavaScript.
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(photos/2452.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Обратите внимание на отрицательное значение z-index
для -10
. html
по умолчанию для корневого элемента z-index
есть 0
. Это значение должно быть наименьшим z-index
, чтобы иметь его как фон.
Я два дня пытался использовать разные сообщения и методы, пытаясь понять это. Я призываю всех к START, глядя на сообщение Яйца, и возиться с кодепином, который он и другие создали.
Это было единственное решение, которое я нашел для себя правильно. Я рекомендую его ответ в качестве решения / хорошей отправной точкой для тех, кто из нас все еще выясняет эту проблему в наших собственных веб-приложениях.
Я еще не получил достаточной репутации, чтобы прокомментировать его сообщение, иначе я бы. Я даже не могу проголосовать за это, но я тоже это сделаю.
Это фактический код, который я использовал:
html::before {
content: ' ';
display: block;
background-image: url('path-to-your-image');
background-position: bottom left;
/*For my instance this is how I have built my bg image. Indexes off the
bottom left for consistency*/
background-size: cover;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: -10;
/*I haven't tested my full app functionality after changing the z-index, but everything appears to work flawlessly right now.*/
}
Я попробовал все с его оригинальным кодом. Когда у меня был
background-position: center;
хром (при последнем обновлении Android от 1/8/18), он будет отставать от обновления положения изображения, поэтому при прокрутке веб-сайта будет патч цвета, navbar / URL-адрес браузера. Затем он исчезнет после того, как браузер пересчитает центр изображения (это то, что я предполагаю, что это происходит).
Итак, я рекомендую сделать изображение вокруг вашего нижнего колонтитула или заголовка, как я, и установить верхний левый / правый или внизу слева / справа для вашей позиции.
Итак, ЭТО РАБОТАЕТ для меня. Поэтому попробуйте, если вы читаете это далеко, и ничего еще не сработало. Хотя вы уже должны были ударить исходный пост.
Спасибо, Яйца, и другие товарищи, с которыми вы сотрудничали в своем кодеде.
У меня было очень простое решение для этого, после борьбы со всеми методами исправления этого.
У меня была проблема на мобильных устройствах IOS.
css (рабочий стол)
blockquote>#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { background-size: auto; background-attachment: fixed; } .widget-wrap { background-attachment: scroll; }
Затем я перезаписываю его с помощью медиа-запроса, удаляя «фиксированный» в качестве привязки к фону.
css (mobile)
blockquote>@media (max-width: 767px) { #ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { background-attachment: initial; } }
initial - присваивает этому свойству значение по умолчанию. Я думаю, потому что IOS не принимает «фиксированный», он возвращается к значению по умолчанию, которое он принимает, прокручивает.
Это работало для меня на каждом устройстве. Надеюсь, это тоже поможет кому-то другому.