Доступ к фону веб-страницы с помощью CSS - PullRequest
Новая
       15

Доступ к фону веб-страницы с помощью CSS

0 голосов
/ 01 ноября 2019

Я хочу настроить CSS веб-страницы в Squarespace. Я просто хочу иметь возможность использовать фон с линейным градиентом. Осматривая страницу, я могу получить желаемый результат, отредактировав класс page-section со следующим кодом: 

background: linear-gradient(90deg, black, blue);

Однако я не могу повторить это изменение, когда я пытаюсь навсегда ввести код в веб-сайт,Насколько я понимаю, я бы сделал следующий вариант: 

<style>
#yui_3_17_2_1_1572554735264_404 .page-section {
  background: linear-gradient(90deg, black, blue);
}
</style>

Обладая крайне ограниченными знаниями, я хочу использовать идентификатор и класс, чтобы ограничить то, что я изменяю. Однако, по-видимому, это неправильно относится к той области, которую я изменяю при проверке.

Ниже приведен скопированный элемент с веб-сайта, который я пытаюсь изменить. Еще раз, когда я проверяю этот элемент, а затем изменяю стиль непосредственно в меню проверки, я могу внести желаемое изменение. 

<section class="page-section

  layout-engine-section

background-width--full-bleed

  section-height--medium


  content-width--wide

horizontal-alignment--center
vertical-alignment--middle

white" data-section-id="5db3673a86bd8571acb9b055" data-controller="SectionWrapperController, MagicPaddingController" data-current-styles="{
&quot;video&quot; : {
&quot;playbackSpeed&quot; : 0.5,
&quot;filter&quot; : 1,
&quot;filterStrength&quot; : 0,
&quot;zoom&quot; : 0
},
&quot;backgroundWidth&quot; : &quot;background-width--full-bleed&quot;,
&quot;sectionHeight&quot; : &quot;section-height--medium&quot;,
&quot;customSectionHeight&quot; : 10,
&quot;horizontalAlignment&quot; : &quot;horizontal-alignment--center&quot;,
&quot;verticalAlignment&quot; : &quot;vertical-alignment--middle&quot;,
&quot;contentWidth&quot; : &quot;content-width--wide&quot;,
&quot;customContentWidth&quot; : 50,
&quot;sectionTheme&quot; : &quot;white&quot;,
&quot;sectionAnimation&quot; : &quot;none&quot;,
&quot;backgroundMode&quot; : &quot;image&quot;
}" data-animation="none" style="padding-top: 98.8125px;" data-controllers- 
bound="SectionWrapperController, MagicPaddingController" data-active="true" 
id="yui_3_17_2_1_1572553417171_403">

1 Ответ

2 голосов
/ 01 ноября 2019

Вы на правильном пути. Есть только несколько вещей, которые вам не хватает. Вот они:

  1. Любой атрибут id в Squarespace, который начинается с yui, является динамически назначенным идентификатором, что означает, что он будет меняться при каждом обновлении страницы. Если вы видите атрибут id, начинающийся с yui, не используйте его в своем CSS. Вместо этого найдите другой способ выбора / выбора элемента.

  2. В Squarespace 7 вы можете использовать идентификаторы разделов в своем CSS (они не были сгенерированы динамически). Однако, основываясь на коде, который вы копируете / вставляете, вы используете шаблон Squarespace версии 7.1, что означает, что вам нужно будет использовать атрибут data-section-id вместо того, чтобы указывать на определенный раздел. Если вы читаете что-то, что говорит вам использовать идентификатор раздела для таргетинга, эта информация, скорее всего, относится к Squarespace 7, а не к используемой вами версии шаблона, а именно 7.1. Селекторы атрибутов используют синтаксис в квадратных скобках и не так просты, как идентификаторы и классы. Но это не так уж сложно. Прочитайте подробнее о селекторах атрибутов , если хотите.

  3. Даже если вы можете использовать атрибут id, ваш код может работать не так, как вы предполагали. Если это правда, это может быть потому, что у вас есть пробел между id и классом .page-section. В CSS это означает «целевые элементы с классом« page-section », которые являются потомками элемента с заданным идентификатором». То, что вы можете захотеть, это нацелить раздел, который имеет данный идентификатор. Для этого удалите пробел между идентификатором и классом.

Собрав все это вместе, вы получите: 

[data-section-id="5db3673a86bd8571acb9b055"].page-section {
  background: linear-gradient(90deg, black, blue);
}

Обратите внимание, что в приведенном вышекод, вы можете технически избавиться от .page-section части селектора, и он все равно будет работать нормально (при условии, что вы пытаетесь нацелить раздел с этим идентификатором). Я включил его исключительно для демонстрации пункта № 3 выше. Конечно, если вы пытаетесь нацелиться на потомка, оставьте пробел и установите класс соответствующим образом.

...