Сохраните и/или примените фоновое изображение одним щелчком мыши. ⇐ CSS

Разбираемся в CSS
Ответить
Anonymous
 Сохраните и/или примените фоновое изображение одним щелчком мыши.

Сообщение Anonymous »

Это вопрос не о том, как добавить фоновые изображения, а о том, как сохранить настройку после выбора параметра, чтобы после обновления или изменения страницы он запоминал выбор. >
Я сделал так, чтобы мой фон менялся при нажатии, однако тема не сохраняется и фактически не применяется после выхода со страницы или обновления.
< hr />
1.Можно ли как-нибудь применить это к исходному коду? если да, то мне бы очень хотелось помочь, как это сделать.
если нет
2.Какие изменения мне нужно внести, чтобы НОВЫЙ JS работал с тем, что у меня есть сейчас?
Дополнительная задача:
(Я хочу, чтобы это влияло только на страницу профиля и страницу настроек, а не на всю веб-сайт)
Буду очень благодарен за помощь. Не хочу, чтобы это звучало ужасно.

Внизу приведены ссылки на Codepens.
1.Это мой исходный код, который я использовал для изменения фона: https://codepen.io/Elixble/pen/RwzZaWB< /p>
2.Это код, который я пытался реализовать, но Я запутался/потерял, как заставить его работать с тем, что у меня есть: https://codepen.io/Elixble/pen/KwPyyVY
Я также покажу код ниже.< /p>
1.Код рабочий, но НЕ СОХРАНЯЕТ
(HTML)

Код: Выделить всё







Embers







Darkmode
JS

Код: Выделить всё

function myFunction(obj) {
$('body#Background').removeClass().addClass($(obj).data('class'));
}
CSS

Код: Выделить всё

body {
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
position: absolute;
margin: auto;
}

.Embers-Theme-Card-Gradient{
background-image: url("https://i.postimg.cc/RFdn3tYZ/Embers-Background.png");
position:relative;
}

.Darkmode-Theme-Card-Gradient{
("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
position:relative;
}

.Coffee-Theme-Card-Gradient{
("https://i.postimg.cc/Njxp1Q0J/Coffee.png");
position:relative;
}

.Embers {
--perspective: 1400px;
--rotateX: 0;
--rotateY: 0;
--angle: 6.5deg;
position: absolute;
display: grid;
place-content: center;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
padding: 2rem;
aspect-ratio: 1 / 2;
background-image: url("https://i.postimg.cc/wBDMSNcj/Embers.png");
background-size: cover;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
transition: transform 350ms ease;
width: 180px;
height: 75px;
border-radius: 20px;
left: 29%;
bottom: 80%;
}

.Embers>  :where(h1,
p) {
background: rgba(221, 221, 221, 0.432);
margin: 0;
padding: 0.5rem;
}

.mouse-position-tracker {
position: absolute;
inset: 0;
}

.mouse-position-tracker>div {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
z-index: 2;
}

.Embers:has(.mouse-position-tracker>div:nth-child(1):hover) {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(2):hover) {
--rotateX: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(3):hover) {
--rotateX: var(--angle);
--rotateY: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(4):hover) {
--rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(6):hover) {
--rotateY: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(7):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(8):hover) {
--rotateX: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(9):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
}

/* 1st, 4th, 7th */

.mouse-position-tracker>div:nth-of-type(3n - 2) {
left: 0;
}

/* 2nd, 5th, 8th */

.mouse-position-tracker>div:nth-of-type(3n - 1) {
left: calc(100% / 3);
}

/* 3rd, 6th, 9th */

.mouse-position-tracker>div:nth-of-type(3n) {
right: 0;
}

/* 1-3 */

.mouse-position-tracker>div:nth-child(n+1):nth-child(-n+3) {
top: 0;
}

/* 4-6 */

.mouse-position-tracker>div:nth-child(n+4):nth-child(-n+6) {
top: calc(100% / 3);
}

/* 7-9 */

.mouse-position-tracker>div:nth-child(n+7):nth-child(-n+9) {
bottom: 0;
}

/* general styling */

:root {
--shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02), 0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035), 0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05), 0px 37px 80px rgba(0, 0, 0, 0.07);
}

.Embers {
cursor: pointer;
}

.Darkmode-Theme-Card {
--perspective: 1400px;
--rotateX: 0;
--rotateY: 0;
--angle: 5deg;
position: absolute;
display: grid;
place-content: center;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
padding: 2rem;
aspect-ratio: 1 / 2;
background-image: url("https://i.postimg.cc/Px4xqk7G/DarkMode.png");
background-size: cover;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
transition: transform 350ms ease;
width: 180px;
height: 75px;
border-radius: 20px;
left: 10%;
bottom: 80%;
}

.Darkmode-Theme-Card > :where(h1, p) {
background: rgba(221, 221, 221, 0.432);
margin: 0;
padding: 0.5rem;
}

.mouse-position-tracker {
position: absolute;
inset: 0;
}

.mouse-position-tracker > div {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
z-index: 2;
}

.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(1):hover) {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(2):hover) {
--rotateX: var(--angle);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(3):hover) {
--rotateX: var(--angle);
--rotateY: var(--angle);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(4):hover) {
--rotateY: calc(var(--angle) * -1);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(6):hover) {
--rotateY: var(--angle);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(7):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(8):hover) {
--rotateX: calc(var(--angle) * -1);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker >  div:nth-child(9):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
}

/* 1st, 4th, 7th */
.mouse-position-tracker > div:nth-of-type(3n - 2) {
left: 0;
}
/* 2nd, 5th, 8th */
.mouse-position-tracker > div:nth-of-type(3n - 1) {
left: calc(100% / 3);
}
/* 3rd, 6th, 9th */
.mouse-position-tracker > div:nth-of-type(3n) {
right: 0;
}

/* 1-3 */
.mouse-position-tracker > div:nth-child(n + 1):nth-child(-n + 3) {
top: 0;
}

/* 4-6 */
.mouse-position-tracker > div:nth-child(n + 4):nth-child(-n + 6) {
top: calc(100% / 3);
}

/* 7-9 */
.mouse-position-tracker > div:nth-child(n + 7):nth-child(-n + 9) {
bottom: 0;
}

/* general styling */
:root {
--shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02),
0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035),
0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05),
0px 37px 80px rgba(0, 0, 0, 0.07);
}

.Darkmode-Theme-Card
{
cursor:pointer;
}

#SettingsBox
{
position:relative;
height:850px;
width:1400px;
background-color:rgba(0, 0, 0, 0.25);
border-radius:20px;
box-shadow: -5px 5px 15px #111a;
margin:auto;
top:10%;
}
2.НЕ работает (тот же HTML и CSS)
(HTML)

Код: Выделить всё







Embers







Darkmode
JS

Код: Выделить всё

let Embers = localStorage.getItem( 'Embers' )
const themeSwitch = document-getElementById ('Background')

const enableEmbers = () =› {
document.body.classList.add ('Embers')
localStorage setItem( 'Embers', 'active')
}

const disableEmbers = () => {
document. body. classList. remove( 'Embers')
localStorage setItem( 'Embers', null)
}

themeSwitch.  addEventListener ("click", () => {
Embers !== "active" ? enableDarkmode() : disableDarkmode()
({
CSS

Код: Выделить всё

body {
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
position: absolute;
margin: auto;
}

.Embers-Theme-Card-Gradient{
background-image: url("https://i.postimg.cc/RFdn3tYZ/Embers-Background.png");
position:relative;
}

.Darkmode-Theme-Card-Gradient{
("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
position:relative;
}

.Coffee-Theme-Card-Gradient{
("https://i.postimg.cc/Njxp1Q0J/Coffee.png");
position:relative;
}

.Embers {
--perspective: 1400px;
--rotateX: 0;
--rotateY: 0;
--angle: 6.5deg;
position: absolute;
display: grid;
place-content: center;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
padding: 2rem;
aspect-ratio: 1 / 2;
background-image: url("https://i.postimg.cc/wBDMSNcj/Embers.png");
background-size: cover;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
transition: transform 350ms ease;
width: 180px;
height: 75px;
border-radius: 20px;
left: 29%;
bottom: 80%;
}

.Embers>  :where(h1,
p) {
background: rgba(221, 221, 221, 0.432);
margin: 0;
padding: 0.5rem;
}

.mouse-position-tracker {
position: absolute;
inset: 0;
}

.mouse-position-tracker>div {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
z-index: 2;
}

.Embers:has(.mouse-position-tracker>div:nth-child(1):hover) {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(2):hover) {
--rotateX: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(3):hover) {
--rotateX: var(--angle);
--rotateY: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(4):hover) {
--rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(6):hover) {
--rotateY: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(7):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(8):hover) {
--rotateX: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(9):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
}

/* 1st, 4th, 7th */

.mouse-position-tracker>div:nth-of-type(3n - 2) {
left: 0;
}

/* 2nd, 5th, 8th */

.mouse-position-tracker>div:nth-of-type(3n - 1) {
left: calc(100% / 3);
}

/* 3rd, 6th, 9th */

.mouse-position-tracker>div:nth-of-type(3n) {
right: 0;
}

/* 1-3 */

.mouse-position-tracker>div:nth-child(n+1):nth-child(-n+3) {
top: 0;
}

/* 4-6 */

.mouse-position-tracker>div:nth-child(n+4):nth-child(-n+6) {
top: calc(100% / 3);
}

/* 7-9 */

.mouse-position-tracker>div:nth-child(n+7):nth-child(-n+9) {
bottom: 0;
}

/* general styling */

:root {
--shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02), 0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035), 0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05), 0px 37px 80px rgba(0, 0, 0, 0.07);
}

.Embers {
cursor: pointer;
}

.Darkmode-Theme-Card {
--perspective: 1400px;
--rotateX: 0;
--rotateY: 0;
--angle: 5deg;
position: absolute;
display: grid;
place-content: center;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
padding: 2rem;
aspect-ratio: 1 / 2;
background-image: url("https://i.postimg.cc/Px4xqk7G/DarkMode.png");
background-size: cover;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
transition: transform 350ms ease;
width: 180px;
height: 75px;
border-radius: 20px;
left: 10%;
bottom: 80%;
}

.Darkmode-Theme-Card > :where(h1, p) {
background: rgba(221, 221, 221, 0.432);
margin: 0;
padding: 0.5rem;
}

.mouse-position-tracker {
position: absolute;
inset: 0;
}

.mouse-position-tracker > div {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
z-index: 2;
}

.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(1):hover) {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(2):hover) {
--rotateX: var(--angle);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(3):hover) {
--rotateX: var(--angle);
--rotateY: var(--angle);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(4):hover) {
--rotateY: calc(var(--angle) * -1);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(6):hover) {
--rotateY: var(--angle);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(7):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(8):hover) {
--rotateX: calc(var(--angle) * -1);
}

.Darkmode-Theme-Card:has(.mouse-position-tracker >  div:nth-child(9):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
}

/* 1st, 4th, 7th */
.mouse-position-tracker > div:nth-of-type(3n - 2) {
left: 0;
}
/* 2nd, 5th, 8th */
.mouse-position-tracker > div:nth-of-type(3n - 1) {
left: calc(100% / 3);
}
/* 3rd, 6th, 9th */
.mouse-position-tracker > div:nth-of-type(3n) {
right: 0;
}

/* 1-3 */
.mouse-position-tracker > div:nth-child(n + 1):nth-child(-n + 3) {
top: 0;
}

/* 4-6 */
.mouse-position-tracker > div:nth-child(n + 4):nth-child(-n + 6) {
top: calc(100% / 3);
}

/* 7-9 */
.mouse-position-tracker > div:nth-child(n + 7):nth-child(-n + 9) {
bottom: 0;
}

/* general styling */
:root {
--shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02),
0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035),
0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05),
0px 37px 80px rgba(0, 0, 0, 0.07);
}

.Darkmode-Theme-Card
{
cursor:pointer;
}

#SettingsBox
{
position:relative;
height:850px;
width:1400px;
background-color:rgba(0, 0, 0, 0.25);
border-radius:20px;
box-shadow: -5px 5px 15px #111a;
margin:auto;
top:10%;
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... e-on-click
Вернуться к началу
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»