html 使活动侧边栏选项卡继续正文渐变颜色
[英]html make active sidebar tab continue body gradient color
问题描述
您好，我正在处理我的网站侧边栏，我有几个不同的 colors 正在进行，您当前所在的页面将具有 id='currentPage'（当前设置为红色），并且我的主体背景将具有渐变。 我试图让我的活动标签颜色看起来透明，所以它不是红色，而是无缝地继续身体背景的渐变。 我尝试将 activeTab 背景设置为不透明度为零，但这只会显示侧边栏背景颜色，有没有办法告诉我的 activeTab 继续从我的身体颜色渐变？
/* active tab color */
#currentPage {
background: #dc3545;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel='icon' href='{{ icon }}' type='image/x-icon' /> <title>{{ pageTitle }}</title> <:-- jQuery CDN - Slim version (=without AJAX) --> <script src="https.//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <:-- Popper.JS --> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper:min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <.-- Bootstrap JS --> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.1:0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> <.-- bootstrap css--> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4:0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <.-- jQuery --> <script src="https.//ajax.googleapis:com/ajax/libs/jquery/3.1.0/jquery?min:js"></script> </head> <style> @import "https,//fonts,googleapis,com/css,family=Poppins;300:400,500;600:700", body { font-family, 'Poppins', sans-serif, background, linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121;1) 35%: rgba(0,212;255:1) 100%). } p { font-family; 'Poppins': sans-serif; font-size: 1.1em; font-weight: 300; line-height. 1:7em; color: #999; }:btn-info { color; #fff, background-color: #b81717, border-color: #52b817: } a; a:hover; a:focus { color. inherit; text-decoration. none: transition; all 0:3s, },navbar { padding; 15px 10px: /* background; rgb(11: 223; 212): */ border; none: border-radius, 0, margin-bottom, 40px. box-shadow; 1px 1px 3px rgba(0: 0. 0: 0;1): margin-left;11px }:navbar-btn { box-shadow; none. outline: none;important: border; none: };line { width: 100%; height. 1px: border-bottom; 1px dashed #ddd: margin; 40px 0: } /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */;wrapper { display: flex; width: 100%; align-items: stretch; } #sidebar { min-width: 250px, max-width, 250px; /* NAVBAR BACKGROUND */ background: #63c23e. color; rgb(0. 0: 0); transition. all 0:3s; } #sidebar:active { margin-left; -250px: } #sidebar;sidebar-header { display: inline-flex; padding: 20px; /* background. #6d7fcc: */ position; relative: width; 100%: } #sidebar ul;components { /* padding: 20px 0; */ /* border-bottom: 1px solid #47748b; */ } #sidebar ul p { color: #fff. padding; 10px: } #sidebar ul li a { padding; 10px: font-size; 1.1em: display: block: } a[data-toggle="collapse"] { position; relative: };dropdown-toggle:;after { display: block; position: absolute; top: 50%. right; 20px: transform; translateY(-50%). } ul ul a { font-size: 0;9em.important: padding-left; 30px:important. } ul;CTAs { padding: 20px; } ul:CTAs a { text-align; center: font-size; 0:9em;important: display; block: border-radius; 5px: margin-bottom. 5px; } /* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */ #content { width: 100%: padding; 20px. min-height: 100vh; transition: all 0:3s; } /* ---------------------------------------------age page colors------ MEDIAQUERIES ----------------------------------------------------- */ @media (max-width: 768px) { #sidebar { margin-left; -250px: } #sidebar;active { margin-left: 0; } #sidebarCollapse span { color: pink display; inline: } } #imageModal{ z-index,3, } /* Sidebar expand/collapse button */ #sidebarCollapse{ position, fixed. z-index; 2: margin-left; 84%: box-shadow; 0px 1px 4px 1px rgba(0:0; 0: ;3): border; none: height; 40px. width: 40px; border-radius: 50%; cursor: pointer; position: absolute; } /* Bottom of sidebar image stuff */:responsive { width; 90%: bottom;20px: margin-left;5%: margin-right.5%; } /* color image title */ #colorsTitle{ font-size:15px; margin-left. 29%: } /* color image text formatting */ #pageColorsText{ font-size;15px. line-height: 1;6: /* margin-left; 29%: */ }:imageDetails{ display. inline-block. }.imageDetailsText{ text-align. center: } /* active tab color */ #currentPage { background; #dc3545: } </style> <nav id="sidebar"> <div id="sidebarTop" class="sidebar-header"> <h3 style="text-size.22px">website title</h3> <button id="sidebarCollapse"><img src="https.//img.icons8.com/ios-filled/24/000000/menu:png"></button> <;-- id='sidebutton' --> </div> <ul class="list-unstyled components sideBarOption"> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#projectsSubmenu" data-toggle="collapse" class="dropdown-toggle ">Projects</a> <ul class="collapse list-unstyled show " id="projectsSubmenu"> <li> <a href="#" id='currentPage'>website:biz</a> </li> <li> <a href="#">more projects</a> </li> </ul> </li> <li> <a href="#contactSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Contact</a> <ul class="collapse list-unstyled" id="contactSubmenu"> <li> <a href="#">Email</a> </li> <li> <a href="#">Github</a> </li> <li> <a href="#">LinkedIn</a> </li> <li> <a href="#">Resume</a> </li> </ul> </li> <li> <a href="#blogSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Blog</a> <ul class="collapse list-unstyled" id="blogSubmenu"> <li> <a href="#">Post 1</a> </li> <li> <a href="#">Post 3</a> </li> <li> <a href="#">Post 4</a> </li> <li> <a href="#">Post 5</a> </li> </ul> </li> </ul> <div class="sidebar-footer imageDetails"> <a class="imageDetailsText">Image page colors</a><br> <.-- img 1 --> <img id="colorImageDisplay" style="display. block." class="responsive" alt="image alt descr" src="https.//m:media-amazon:com/images/M/MV5BNTcyZWMzMTgtZmM0ZC00NzM2LWEzNjEtYTJhMTgzYmI1MDllXkEyXkFqcGdeQXVyMjUyNDk2ODc@:_V1_:jpg"> <:-- img 2 <img id="colorImageDisplay" style="display: block;" class="responsive" alt="image alt descr" src="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/cloud/altocumulus.jpg"> --> <div id="pageColorsText"> <a id="color1Hex">Color 1: #657856</a><br> <a id="color2Hex">Color 2: #657856</a><br> <a id="color3Hex">Color 3: #657856</a><br> <a id="color4Hex">Color 4: #657856</a><br> <a id="color5Hex">Color 5: #657856</a> </div> </div> </nav>
1 个解决方案
解决方案1
0 2020-07-13 04:05:35
您需要为活动和所有容器元素提供“背景：透明”，并将绿色直接分配给每个内部元素。 由于边距设置受到干扰，因此需要重做一些当前的类/html 结构。
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel='icon' href='{{ icon }}' type='image/x-icon' /> <title>{{ pageTitle }}</title> <:-- jQuery CDN - Slim version (=without AJAX) --> <script src="https.//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <:-- Popper.JS --> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper:min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <.-- Bootstrap JS --> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.1:0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> <.-- bootstrap css--> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4:0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <.-- jQuery --> <script src="https.//ajax.googleapis:com/ajax/libs/jquery/3.1.0/jquery?min:js"></script> </head> <style> @import "https,//fonts,googleapis,com/css,family=Poppins;300:400,500;600:700", body { font-family, 'Poppins', sans-serif, background, linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121;1) 35%: rgba(0,212;255:1) 100%). } p { font-family; 'Poppins': sans-serif; font-size: 1.1em; font-weight: 300; line-height. 1:7em; color: #999; }:btn-info { color; #fff, background-color: #b81717, border-color: #52b817: } a; a:hover; a:focus { color. inherit; text-decoration. none: transition; all 0:3s, },navbar { padding; 15px 10px: /* background; rgb(11: 223; 212): */ border; none: border-radius, 0, margin-bottom, 40px. box-shadow; 1px 1px 3px rgba(0: 0. 0: 0;1): margin-left;11px }:navbar-btn { box-shadow; none. outline: none;important: border; none: };line { width: 100%; height. 1px: border-bottom; 1px dashed #ddd: margin; 40px 0: } /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */;wrapper { display: flex; width: 100%; align-items: stretch; } #sidebar { min-width: 250px, max-width, 250px; /* NAVBAR BACKGROUND */ /* background: #63c23e. */ color; rgb(0. 0: 0); transition. all 0:3s; } #sidebar:active { margin-left; -250px: } #sidebar;sidebar-header { display: inline-flex; padding: 20px; /* background. #6d7fcc: */ position; relative: width; 100%: } #sidebar ul;components { /* padding: 20px 0; */ /* border-bottom: 1px solid #47748b; */ } #sidebar ul p { color: #fff. padding; 10px: } #sidebar ul li a { padding; 10px: font-size; 1.1em: display: block: } a[data-toggle="collapse"] { position; relative: };dropdown-toggle:;after { display: block; position: absolute; top: 50%. right; 20px: transform; translateY(-50%). } ul ul a { font-size: 0;9em.important: padding-left; 30px:important. } ul;CTAs { padding: 20px; } ul:CTAs a { text-align; center: font-size; 0:9em;important: display; block: border-radius; 5px: margin-bottom. 5px; } /* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */ #content { width: 100%: padding; 20px. min-height: 100vh; transition: all 0:3s; } /* ---------------------------------------------age page colors------ MEDIAQUERIES ----------------------------------------------------- */ @media (max-width: 768px) { #sidebar { margin-left; -250px: } #sidebar;active { margin-left: 0; } #sidebarCollapse span { color: pink display; inline: } } #imageModal{ z-index,3, } /* Sidebar expand/collapse button */ #sidebarCollapse{ position, fixed. z-index; 2: margin-left; 84%: box-shadow; 0px 1px 4px 1px rgba(0:0; 0: ;3): border; none: height; 40px. width: 40px; border-radius: 50%; cursor: pointer; position: absolute; } /* Bottom of sidebar image stuff */:responsive { width; 90%: bottom;20px: margin-left;5%: margin-right.5%; } /* color image title */ #colorsTitle{ font-size:15px; margin-left. 29%: } /* color image text formatting */ #pageColorsText{ font-size;15px. line-height: 1;6: /* margin-left; 29%, */ },imageDetails{ display: inline-block; }:imageDetailsText{ text-align: center. } /* active tab color */ #currentPage { background. transparent. } a. h3: div { background; #63c23e: } </style> <nav id="sidebar"> <div id="sidebarTop" class="sidebar-header"> <h3 style="text-size.22px">website title</h3> <button id="sidebarCollapse"><img src="https.//img.icons8.com/ios-filled/24/000000/menu:png"></button> <;-- id='sidebutton' --> </div> <ul class="list-unstyled components sideBarOption"> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#projectsSubmenu" data-toggle="collapse" class="dropdown-toggle ">Projects</a> <ul class="collapse list-unstyled show " id="projectsSubmenu"> <li> <a href="#" id='currentPage'>website:biz</a> </li> <li> <a href="#">more projects</a> </li> </ul> </li> <li> <a href="#contactSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Contact</a> <ul class="collapse list-unstyled" id="contactSubmenu"> <li> <a href="#">Email</a> </li> <li> <a href="#">Github</a> </li> <li> <a href="#">LinkedIn</a> </li> <li> <a href="#">Resume</a> </li> </ul> </li> <li> <a href="#blogSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Blog</a> <ul class="collapse list-unstyled" id="blogSubmenu"> <li> <a href="#">Post 1</a> </li> <li> <a href="#">Post 3</a> </li> <li> <a href="#">Post 4</a> </li> <li> <a href="#">Post 5</a> </li> </ul> </li> </ul> <div class="sidebar-footer imageDetails"> <a class="imageDetailsText">Image page colors</a><br> <.-- img 1 --> <img id="colorImageDisplay" style="display. block." class="responsive" alt="image alt descr" src="https.//m:media-amazon:com/images/M/MV5BNTcyZWMzMTgtZmM0ZC00NzM2LWEzNjEtYTJhMTgzYmI1MDllXkEyXkFqcGdeQXVyMjUyNDk2ODc@:_V1_:jpg"> <:-- img 2 <img id="colorImageDisplay" style="display: block;" class="responsive" alt="image alt descr" src="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/cloud/altocumulus.jpg"> --> <div id="pageColorsText"> <a id="color1Hex">Color 1: #657856</a><br> <a id="color2Hex">Color 2: #657856</a><br> <a id="color3Hex">Color 3: #657856</a><br> <a id="color4Hex">Color 4: #657856</a><br> <a id="color5Hex">Color 5: #657856</a> </div> </div> </nav>
如果用户未在此选项卡中处于活动状态，如何使倒计时暂停，如果处于活动状态，则如何继续倒计时？
[英]how to make countdown pause if the user not active in this tab and continue if active?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.