Posted 7 апреля, 20213 yr comment_168814 Может кто помочь.. Когда сайт скролить к низу, то середина прозрачного места (фон), отпечатывается в середине.. Кто знает, как зафиксировать и где это место, или отвязать его как-то.. Уже все перепробовал.. Спойлер /* ===================================================== */ /* */ /* Theme developed by ipsfocus.com */ /* */ /* Need support? Visit the official customer forums! */ /* https://www.ipsfocus.com/forums/ */ /* */ /* ===================================================== */ /* ---------------- Global Header User links Navigation Dropdown navigation menus Search Main Elements Sidebar and Widgets Topic View ---------------- */ /* ---------------- - Global ---------------- */ body{ background-position: 50% 0; background-attachment: fixed; background-size: cover; } /* ---------------- - Header ---------------- */ @media screen and (min-width:980px){ #ipsLayout_header{ height: calc({theme="logoheight"}px + 10px); } } .ipsApp #header{ background: {hextorgb="header" opacity="0.9"}; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15), 0px 1px 0px rgba(0, 0, 0, 0.1); } #ipsLayout_header{ position: relative; z-index: 2; } #ipsLayout_body{ position: relative; z-index: 1; } /* Fixed header */ {{if theme.feature_2}} @media screen and (min-width:980px){ .ipsApp #header{ position: fixed; top: 0; left: 0; right: 0; } .focus-fixed-nav .ipsSticky_top{ transform: translateY({theme="ipsfocus_text"}px); } .focus-fixed-nav a[id^="comment-"]{ top: -{expression="theme.ipsfocus_text + 1"}px; } .focus-fixed-nav .cPostRating_controls{ top: {expression="theme.ipsfocus_text + 10"}px; } .focus-fixed-nav.focus-sticky-author .cAuthorPane_info{ top: {theme="ipsfocus_text"}px; } } {{endif}} /* ---------------- - User links ---------------- */ #elUserNav{ color: #fff; border: 1px solid rgba(255,255,255,0.1); border-width: 0 1px 0 0; } html[dir='rtl'] #elUserNav{ border-width: 0 0 0 1px; } #elUserNav > li{ border-radius: 0; border-color: rgba(255,255,255,0.1); } /* Hover */ #elUserNav > li:hover{ background-color: rgba(0,0,0,0.1); } /* ---------------- - Navigation main_nav: tab background main_nav_font: link colour main_nav_tab: dropdown background main_nav_tab_font: dropdown link ---------------- */ .nav-bar{ background: {hextorgb="main_nav" opacity="0.75"}; border: 1px solid {hextorgb="main_nav" opacity="0.5"}; border-radius: 4px; box-shadow: 0px 1px 5px rgba(0,0,0,0.4); position: relative; } @supports ( (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) ) { .nav-bar{ z-index: 1; } } .ipsNavBar_primary{ color: {hextorgb="main_nav_font" opacity="0.9"}; } .ipsNavBar_primary > ul > li{ font-size: 1.2rem; } .ipsApp .ipsNavBar_primary > ul > li > a{ font-weight: bold; border-radius: 3px; padding: 0 15px; } /* Hover link */ .ipsApp .ipsNavBar_primary > ul > li:hover > a{ background: {hextorgb="main_nav_font" opacity="0.05"}; } /* Active link */ .ipsApp .ipsNavBar_primary > ul > li[data-active] > a{ background: {hextorgb="main_nav_font" opacity="0.08"}; } /* ---------------- - Dropdown navigation menus ---------------- */ .ipsNavBar_secondary{ color: {theme="main_nav_tab"}; /* Background and arrow */ box-shadow: rgba(0,0,0,0.26) 0px 6px 16px, rgba(0,0,0,0.1) 0px 2px 2px; } /* Dropdown menu links */ .ipsNavBar_secondary > li > a:hover{ background: {hextorgb="main_nav_tab_font" opacity="0.05"}; } /* ---------------- - Search ---------------- */ @media screen and (min-width:980px){ #elSearch{ background: rgba(0,0,0,0.3); color: #fff; border-radius: 4px; } html[dir='ltr'] #elSearch{ border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: rgba(255,255,255,0.1) -1px 0 0; } html[dir='rtl'] #elSearch{ border-top-right-radius: 0; border-bottom-right-radius: 0; box-shadow: rgba(255,255,255,0.1) 1px 0 0; } } /* ---------------- - Breadcrumb navigation ---------------- */ /* Link angles */ .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:before, .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:after{ /* Highlight */ color: rgba(255,255,255,0.5); /* Shadow */ border-color: rgba(0,0,0,0.8); } /* Hover */ .ipsBreadcrumb > ul[data-role="breadcrumbList"] li:hover > a:before, .ipsBreadcrumb > ul[data-role="breadcrumbList"] li:hover > a:after, .ipsBreadcrumb .ipsList_inline li a:hover{ background: rgba(255,255,255,0.15); } /* Active */ .ipsApp .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:before, .ipsApp .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:after, .ipsApp .ipsBreadcrumb .ipsList_inline li a:active{ background: rgba(0,0,0,0.2); } /* Side links */ .ipsBreadcrumb .ipsList_inline li{ border-color: rgba(255,255,255,0.2); } .ipsApp .ipsBreadcrumb{ color: {theme="link"}; background: rgba(0,0,0,0.5); border-color: rgba(0,0,0,0.35); box-shadow: inset rgba(255,255,255,0.15) 0px 1px 0px, rgba(0,0,0,0.2) 0px 1px 3px; border-radius: 3px; z-index: auto; } /* Border width */ .ipsBreadcrumb:before{ border-width: 1px; } /* ---------------- - Blur effect ---------------- */ {{if !theme.focus_picker}} body, .box-blur{ background-color: {theme="picker_c1"}; } {{if theme.picker_i1}} .background, .box-blur-image:before{ background-image: url('{theme="picker_i1"}'); } /* Gradient */ .background:before, .box-blur:after{ background-image: linear-gradient(to bottom, {hextorgb="picker_c1" opacity="0"} 70%, {hextorgb="picker_c1" opacity="1"} 100%); } {{else}} /* Remove the gradients and blurred div if an image doesnt exist */ .background:before, .box-blur-image, .box-blur:after{ display: none; } {{endif}} {{endif}} /* Background image */ .background{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-repeat: no-repeat; background-attachment:fixed; background-position: 50% 0; } /* Create gradient and pattern .background:before, .background:after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }*/ /* Gradient */ .background:before{ background-size: inherit; background-repeat: no-repeat; } /* Pattern overlay*/ .background:after{ background: url('{resource="ipsfocus/pattern.jpg" app="core" location="front"}') repeat; opacity: 0.04; } /* Blurred wrapper можно сделать полностью прозрачность */ .box-blur{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; border-radius: inherit; } /* Blurred image */ .box-blur-image{ background-position: inherit; background-repeat: no-repeat; background-size: inherit; position: absolute; width: 100vw; top: -20px; height: calc(100% + 40px); } .box-blur-image:before{ content: ''; display: block; margin: 0 auto; {{if theme.enable_fluid_width}} max-width: calc({theme="fluid_width_size"}% + 40px); {{else}} max-width: calc({theme="fixedWidth"}px + 40px); {{endif}} height: 100%; filter: blur(10px) saturate(140%); background-position: inherit; background-repeat: no-repeat; background-size: inherit; } /* Blurred gradient */ .box-blur:after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: inherit; background-size: inherit; background-repeat: no-repeat; } /* Remove gradient */ .focus-no-gradient .background:before, .focus-no-gradient .box-blur:after{ display: none; } /* Remove pattern overlay */ .focus-no-overlay .background:after{ display: none; } /* Use the following code for a repeating background image */ /* .focus-pattern .background, .focus-pattern .box-blur-image:before{ background-repeat: repeat; background-size: auto 500px; } .focus-pattern .box-blur-image{ max-height: none; } */ /* Remove gradient and overlay for patterns */ /* .focus-pattern .background:before, .focus-pattern .background:after, .focus-pattern .box-blur:after{ display: none; } */ /* Fixed */ .focus-fixed-background .background{ position: fixed; } /* The blur effect is removed for performance reasons */ .focus-fixed-background .box-blur{ display: none; } /* Show or hide blur effect depending on setting. Use css backdrop filter only on desktop if it's supported and remove entirely on all mobiles */ {{if theme.feature_1}} /* Send supported value to javascript instead of Modernizr */ .background{ min-width: 10px; } @supports ( (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) ) { /* Send supported value to javascript instead of Modernizr */ .background{ min-width: 30px; } @media screen and (min-width:980px){ .ipsBox, .ipsPageHeader, .focus-topic-compact .focus-topic, .ipsPager, .ipsWidget, .ipsBox_alt, .ipsApp .ipsToolList > li > .ipsButton_link, #header, .ipsBreadcrumb, .nav-bar, #ipsLayout_footer, .ipsButtonBar{ -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); } } .box-blur{ display: none; } } @media screen and (max-width:979px){ .box-blur{ display: none; } } {{else}} .box-blur{ display: none; } {{endif}} /* Remove blur effect from IE and Edge */ _:-ms-lang(x), .box-blur{ display: none; } /* Remove blur from internal boxes */ html .ipsApp .ipsBox .ipsBox, html .ipsApp .ipsTabs_panels .ipsBox{ -webkit-backdrop-filter: none; backdrop-filter: none; } html .ipsApp .ipsBox .ipsBox .box-blur, html .ipsApp .ipsTabs_panels .ipsBox .box-blur{ display: none; } /* ---------------- - Background Picker ---------------- */ .focus-pickerWrap{ position: relative; } .focus-picker{ padding: 10px; } {{if theme.focus_picker}} .ipsfocus_bg1 body, .ipsfocus_bg1 .box-blur{ background-color: {theme="picker_c1"}; } {{if theme.picker_i1}} .ipsfocus_bg1 .background, .ipsfocus_bg1 .box-blur-image:before{ background-image: url('{theme="picker_i1"}'); } .ipsfocus_bg1 .background:before, .ipsfocus_bg1 .box-blur:after{ background-image: linear-gradient(to bottom, {hextorgb="picker_c1" opacity="0"} 70%, {hextorgb="picker_c1" opacity="1"} 100%); } {{else}} .ipsfocus_bg1 .background:before, .ipsfocus_bg1 .box-blur-image, .ipsfocus_bg1 .box-blur:after{ display: none; } {{endif}} .ipsfocus_bg2 body, .ipsfocus_bg2 .box-blur{ background-color: {theme="picker_c2"}; } {{if theme.picker_i2}} .ipsfocus_bg2 .background, .ipsfocus_bg2 .box-blur-image:before{ background-image: url('{theme="picker_i2"}'); } .ipsfocus_bg2 .background:before, .ipsfocus_bg2 .box-blur:after{ background-image: linear-gradient(to bottom, {hextorgb="picker_c2" opacity="0"} 70%, {hextorgb="picker_c2" opacity="1"} 100%); } {{else}} .ipsfocus_bg2 .background:before, .ipsfocus_bg2 .box-blur-image, .ipsfocus_bg2 .box-blur:after{ display: none; } {{endif}} .ipsfocus_bg3 body, .ipsfocus_bg3 .box-blur{ background-color: {theme="picker_c3"}; } {{if theme.picker_i3}} .ipsfocus_bg3 .background, .ipsfocus_bg3 .box-blur-image:before{ background-image: url('{theme="picker_i3"}'); } .ipsfocus_bg3 .background:before, .ipsfocus_bg3 .box-blur:after{ background-image: linear-gradient(to bottom, {hextorgb="picker_c3" opacity="0"} 70%, {hextorgb="picker_c3" opacity="1"} 100%); } {{else}} .ipsfocus_bg3 .background:before, .ipsfocus_bg3 .box-blur-image, .ipsfocus_bg3 .box-blur:after{ display: none; } {{endif}} .ipsfocus_bg4 body, .ipsfocus_bg4 .box-blur{ background-color: {theme="picker_c4"}; } {{if theme.picker_i4}} .ipsfocus_bg4 .background, .ipsfocus_bg4 .box-blur-image:before{ background-image: url('{theme="picker_i4"}'); } .ipsfocus_bg4 .background:before, .ipsfocus_bg4 .box-blur:after{ background-image: linear-gradient(to bottom, {hextorgb="picker_c4" opacity="0"} 70%, {hextorgb="picker_c4" opacity="1"} 100%); } {{else}} .ipsfocus_bg4 .background:before, .ipsfocus_bg4 .box-blur-image, .ipsfocus_bg4 .box-blur:after{ display: none; } {{endif}} .ipsfocus_bg5 body, .ipsfocus_bg5 .box-blur{ background-color: {theme="picker_c5"}; } {{if theme.picker_i5}} .ipsfocus_bg5 .background, .ipsfocus_bg5 .box-blur-image:before{ background-image: url('{theme="picker_i5"}'); } .ipsfocus_bg5 .background:before, .ipsfocus_bg5 .box-blur:after{ background-image: linear-gradient(to bottom, {hextorgb="picker_c5" opacity="0"} 70%, {hextorgb="picker_c5" opacity="1"} 100%); } {{else}} .ipsfocus_bg5 .background:before, .ipsfocus_bg5 .box-blur-image, .ipsfocus_bg5 .box-blur:after{ display: none; } {{endif}} .ipsfocus_bg6 body, .ipsfocus_bg6 .box-blur{ background-color: {theme="picker_c6"}; } {{if theme.picker_i6}} .ipsfocus_bg6 .background, .ipsfocus_bg6 .box-blur-image:before{ background-image: url('{theme="picker_i6"}'); } .ipsfocus_bg6 .background:before, .ipsfocus_bg6 .box-blur:after{ background-image: linear-gradient(to bottom, {hextorgb="picker_c6" opacity="0"} 70%, {hextorgb="picker_c6" opacity="1"} 100%); } {{else}} .ipsfocus_bg6 .background:before, .ipsfocus_bg6 .box-blur-image, .ipsfocus_bg6 .box-blur:after{ display: none; } {{endif}} {{endif}} /* ---------------- - Main Elements ---------------- */ .content-padding{ padding: 10px 0; } /* Box styles */ .ipsBox, .ipsPageHeader, .focus-topic-compact .focus-topic, .ipsPager, .ipsWidget, .ipsBox_alt, #comments, .focus-pickerWrap, .ipsfocus_megaFooter{ border-radius: 4px; box-shadow: inset rgba(0,0,0,0.2) 0px 0px 0px 1px, rgba(0,0,0,0.2) 0px 1px 4px; position: relative; } /* Box background */ .ipsBox:not( .ipsBox_transparent ):not( .ipsModerated ), .ipsBox, .ipsPageHeader, .focus-topic-compact .focus-topic, .ipsPager, .ipsWidget, .ipsBox_alt, #comments, .focus-pickerWrap, .ipsfocus_megaFooter{ {{if theme.feature_1}} background-color: {hextorgb="area_background_reset" opacity="0.75"}; {{else}} background-color: {hextorgb="area_background_reset" opacity="0.85"}; {{endif}} } /* Maintitle */ .ipsType_sectionTitle{ background: {hextorgb="section_title" opacity="0.2"}; box-shadow: 0px -1px 0px rgba(0,0,0,0.15) inset; border-radius: 4px 4px 0 0; font-weight: normal; font-size: 2.2rem; padding: 26px; } /* ---------------- - Sidebar and Widgets ---------------- */ .ipsWidget.ipsWidget_vertical .ipsWidget_title, .ipsWidget.ipsWidget_horizontal .ipsWidget_title{ background: {hextorgb="widget_title_bar" opacity="0.2"}; box-shadow: 0px -1px 0px rgba(0,0,0,0.15) inset; border-top-left-radius: inherit; border-top-right-radius: inherit; font-weight: bold; padding: 11px 15px; font-size: 1.2rem; } /* ---------------- - Topic View ---------------- */ /* -- Post headers -- */ .cPost:before, #ipsLayout_body .cAuthorPane_mobile{ background-color: rgba(255,255,255,0.25); border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%) !important; } /* -- Comment controls bar -- */ .focus-post-bar .cPost .ipsItemControls{ background: rgba(15,15,15,0.5); border-color: rgba(0,0,0,0.3); } /* ---------------- - Footer ---------------- */ #ipsLayout_footer{ position: relative; border-radius: 4px; background: rgba(0, 0, 0, 0.75); border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 4px; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.4); margin: 10px 0; padding-left: 20px; padding-right: 20px; } @media screen and (max-width:979px){ #ipsLayout_footer{ border-radius: 0; margin: 0; } } /* ---------------- - Other ---------------- */ .ipsfocus_megaFooter{ position: relative; border: 0; margin-bottom: 10px; } .ipsButtonBar{ background: {hextorgb="button_bar" opacity="0.7"}; box-shadow: inset {hextorgb="button_bar" opacity="0.2"} 0px 0px 0px 1px; /* Blur effect */ position: relative; } Link to comment https://ipbmafia.ru/topic/23071-otvyazka-ot-skrolinga-seredinu-fona-prozrachnost/ Share on other sites Больше вариантов
8 апреля, 20213 yr Author comment_168829 Всем «спасибо» )) Link to comment https://ipbmafia.ru/topic/23071-otvyazka-ot-skrolinga-seredinu-fona-prozrachnost/?&do=findComment&comment=168829 Share on other sites Больше вариантов
9 апреля, 20213 yr Author comment_168857 Разобрался, тему можно закрыть. Link to comment https://ipbmafia.ru/topic/23071-otvyazka-ot-skrolinga-seredinu-fona-prozrachnost/?&do=findComment&comment=168857 Share on other sites Больше вариантов
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.