How to lighten any div element?

  • 0
    I use this function:
    //Скрыть элемент (на белом фоне)
    function hideElementClever(div) {
    	let hider = document.createElement('div');
    	hider.style.position = 'absolute';
    	hider.style.width = (div.clientWidth || 10) + 'px';
    	hider.style.height = (div.clientHeight || 10) + 'px';
    	hider.style.background = 'rgba(255,255,255,.7)';
    	hider.style.top = '0';
    	hider.style.pointerEvents = 'none';
    	div.appendChild(hider);
    }

    But this function works crookedly when the element has a non-standard style:
    paddingLeft: 30px;
    paddingRight: 30px;
    margin: 0 -30px;

    How to be?
    CSS David Stone, Oct 13, 2019

  • 3 Answers
  • 0


    when resizing, you will have to recount everything
    Anonymous

  • 0
    On the object itself, put a combination of css filter for example brightness and something else? I can't try it from my phone, but maybe something will be suitable.


    Upd

    Something in the spirit

    filter: saturate (0.4) brightness (1.7) contrast (0.8);


    https://developer.mozilla.org/en-US/docs/Web / CSS / filter
    Anonymous

  • 0
    https://jsfiddle.net/2kydzbgn/


    Here, you can bring it back to js


    If you need it in js, you need to make an analogue of the jQuery function elem.outerWidth () / outerHeight ();
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!