Jump to content

Отвязка от скролинга середину фона (прозрачность)

Featured Replies

Может кто помочь.. Когда сайт скролить к низу, то середина прозрачного места (фон), отпечатывается в середине.. Кто знает, как зафиксировать и где это место, или отвязать его как-то.. Уже все перепробовал..

Спойлер

/* ===================================================== */
/*                                                       */
/*            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;
}

 

01.PNG

Link to comment
https://ipbmafia.ru/topic/23071-otvyazka-ot-skrolinga-seredinu-fona-prozrachnost/
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.


Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.