UserCSS:ページ背景
Scraoboxページの背景色を設定する
Scraoboxページの背景にグラデーションをかける
Scraoboxページの背景画像を設定する
code:style.css
:root {
--main-color: DarkGray; /* 主調色 */
--assort-color: White; /* 従属色 */
--base-color: WhiteSmoke; /* 背景色 */
--accent-color: BlueViolet; /* 強調色 */
/* 4 ページの背景画像 */
}
code:css
/* これがなんだかわからない */
.page-wrapper {
}
/* ページと関連ページリストを含む？ */
.page {
}
画像なしモード
code:stylexx.css
.page {
background-color: var(--assort-color, WhiteSmoke);
opacity:0.8;
/* filter: blur(1px); */
/* filter: grayscale(50%); */
/* filter: none;*/
}
.page:Hover {
background-color: var(--assort-color, White);
opacity:1;
filter: none;
}
グラデーションモード（画像なし）
code:stylexx.css
.page {
/*background-color: var(--assort-color, WhiteSmoke);*/
background:
linear-gradient(to right,
rgba(255,255,255, 1.0), 30%,
rgba(255,255,255, 0.8), 50%,
rgba(255,255,255, 0.5), 70%,
rgba(255,255,255,0)
);
/* opacity:0.8;*/
/* filter: blur(1px); */
/* filter: grayscale(50%); */
/* filter: none;*/
}
.page:Hover {
background-color: var(--assort-color, White);
opacity:1;
filter: none;
}
固定モード
code:style.css
.page {
background:
linear-gradient(to right,
rgba(255,255,255, 1.0), 30%,
rgba(255,255,255, 0.8), 50%,
rgba(255,255,255, 0.5), 70%,
rgba(255,255,255,0)
) ,
var(--page-bg-image) /* */
;
background-origin: border-box,border-box; /* */
background-repeat: repeat-y,no-repeat; /* */
background-attachment: scroll,fixed; /* */
background-position: 0% 0%, 75% 65% ; /* */
background-size: 100% 100%,30% auto; /* */
}
ワイドモード
code:stylexx.css
.page {
background:
linear-gradient(to right,
rgba(255,255,255, 1.0), 30%,
rgba(255,255,255, 0.8), 50%,
rgba(255,255,255, 0.5), 70%,
rgba(255,255,255,0)
) ,
var(--page-bg-image) /* */
;
background-repeat: repeat-y;
background-attachment: scroll;
background-position: center top ;
background-size: 100% auto;'
}
https://img.shields.io/badge/UserCSS-ページ背景-1572B6.svg?logo=css3&style=for-the-badge
UserCSS.icon
;){kind=link}