为什么我不能从标题中删除backround-attachment:fixed属性,最大宽度为1024px

时间:2019-06-03 03:51:23

标签: html css

因此,在最大宽度为1024px的情况下,我想从标题的背景图片中删除backround-attachment:fixed属性。 backround-attachment:null和backround-attachment:都不起作用吗?有任何想法吗??另外下面发布的js无关紧要,只有它,所以我可以发布此小提琴链接 https://jsfiddle.net/3v1wsm5n/3/

const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
let num = 1;


ham.addEventListener('click', function() {
	ham.classList.add('ham-open');
	menu.style.marginLeft = '50px';
})

menuClose.addEventListener('click', function() {
	ham.classList.remove('ham-open');
	menu.style.marginLeft = '-700px';
})

leftArrow.addEventListener('click', function() {
	num--;
	if(num > 0) {
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
		console.log(num);
		console.log(img.style.backgroundImage);
	} else {
		num = 4;
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
	}
})

rightArrow.addEventListener('click', function() {
	num++;
	if(num <= 4) {
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
		console.log(num);
		console.log(img.style.backgroundImage);
	} else {
		num = 1;
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
	}	
})

// window.sr = ScrollReveal();

// sr.reveal('.logo-wrap', {
// 	duration: 2000
// });

// sr.reveal('.w1', {
// 	duration: 2000,
// 	origin: 'bottom'
// });

// sr.reveal('.w2', {
// 	duration: 3000,
// 	origin: 'bottom'
// });

// sr.reveal('.w3', {
// 	duration: 4000,
// 	origin: 'bottom'
// });

// sr.reveal('.hours-line-left', {
// 	duration: 1000,
// 	origin: 'left',
// 	distance: '200px'
// });

// sr.reveal('.hours-line-right', {
// 	duration: 1000,
// 	origin: 'right',
// 	distance: '200px'
// });

// sr.reveal('.contact-line', {
// 	duration: 1000,
// 	origin: 'bottom',
// 	distance: '250px'
// });

// sr.reveal('.burrito', {
// 	duration: 1000,
// 	origin: 'right',
// 	distance: '250px'
// });

// sr.reveal('.taco', {
// 	duration: 1000,
// 	origin: 'right',
// 	distance: '250px'
// });

// sr.reveal('.guac', {
// 	duration: 1000,
// 	origin: 'right',
// 	distance: '250px'
// });

// sr.reveal('.nachos', {
// 	duration: 1000,
// 	origin: 'bottom',
// 	distance: '250px'
// });

// sr.reveal('.hot', {
// 	duration: 1000,
// 	origin: 'left',
// 	distance: '250px'
// });

// sr.reveal('.back-to-top', {
// 	duration: 1000,
// 	origin: 'bottom',
// });

// sr.reveal('.btp-arrow', {
// 	duration: 1500,
// 	origin: 'top',
// 	distance: '250px'
// });

1 个答案:

答案 0 :(得分:0)

最好查看可用的documentation来查看允许的属性。 CSS不是一种编程语言,因此您所期望的方式不支持null之类的值。

相反,您通常需要使用initial属性将值设置回“浏览器默认值”,而不是“无”。

因此,在您的情况下,background-attachment: initial会将属性设置为浏览器的默认设置scroll(意味着它随页面一起移动)。