Question

除了图像本身之外，几个DIVS具有相同的背景属性。尝试在多选择器中设置它们时，如果设置了单个选择器上的background-image属性，则似乎不会保留属性。有人可以澄清是否保留/重置了哪些背景属性？

.home-content-1, .home-content-1.5, .home-content-2, .home-content-3{
  padding: 3em 0 0 0;
  text-align: center;
  background-color: #fff;
  background-image: url(test.png); /* added this to see if maybe it's necessary */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.home-content-1{
  padding: 3em 0;
  background-image: url('../images/content-1-bg.png');
}

Answer 1

第一个const mobile = { init_flag: false, init: () => { $(window).on('resize', function(){ const width = $(window).width(); if( width <= 450 ){ if(! mobile.init_flag ){ mobile.setup(); } else { mobile.update(); } } else { if( mobile.init_flag ){ mobile.destroy(); } } }); }, setup: () => { mobile.init_flag = true; mobile.triggers = document.querySelectorAll('.js-change-logo'); const tweens = { enterOuter: () => { TweenMax.fromTo( '.c-logo__outer', 1, { fill: '#4dabfc' }, { fill: '#fff' } ); }, enterInner: () => { TweenMax.fromTo( '.c-logo__inner', 1, { fill: '#fff' }, { fill: '#4dabfc' } ); }, leaveOuter: () => { TweenMax.fromTo( '.c-logo__outer', 1, { fill: '#fff' }, { fill: '#4dabfc' } ); }, leaveInner: () => { TweenMax.fromTo( '.c-logo__inner', 1, { fill: '#4dabfc' }, { fill: '#fff' } ); } }; mobile.controller = new ScrollMagic.Controller(); mobile.triggers.forEach(el => { el.scene = new ScrollMagic.Scene({ triggerElement: el, reverse: true, triggerHook: 0.065, duration: el.clientHeight }) .on('enter', () => { tweens.enterOuter(); tweens.enterInner(); }) .on('leave', () => { tweens.leaveOuter(); tweens.leaveInner(); }) .addIndicators() .addTo(mobile.controller); }); }, update: () => { if( mobile.init_flag ){ mobile.triggers.forEach(el => { el.scene.duration(el.clientHeight); }); } }, destroy: function(){ mobile.controller.destroy(true); mobile.init_flag = false; $('.c-logo > *').attr('style', ''); }, }; mobile.init();不是有效的班级名称，而.home-content-1.5正在打破使用1.5（类选择器）的CSS

REF：类名必须以下划线（_），连字符（ - ）或字母（a-z）开头，后跟任意数量的连字符，下划线，字母或数字。

修复了.类名后的第二个，例如1.5。以后的css规则将使用定义的相同属性覆盖前一个规则，例如：

1_5

.home-content-1, .home-content-1_5, .home-content-2, .home-content-3{
  padding: 3em 0 0 0;
  height: 100px;
  width: 200px;
  text-align: center;
  background-color: #fff;
  background-image: url(http://lorempixel.com/400/200/); /* added this to see if maybe it's necessary */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.home-content-1 {
  padding: 3em 0;
  background-image: url(http://via.placeholder.com/200x200);
}

background-image是否重置之前声明的其他背景属性？

1 个答案: