HTML/CSS：如何淡化 div 的左右边缘？

Question

Problem Statement:

Hi, I want to fade out the div and it's contents from the left and right edge using pure CSS. Currently I'm able to achieve this based on an answer to a question on stack overflow.

Code:

 .container { height: 234px; width: 234px; overflow: scroll; mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%); }.container::-webkit-scrollbar { display: none; }

 <div class="container"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat. Dicta eius repellendus totam qui maiores odio a, Lorem ipsum dolor sit amet consectetur adipisicing elit, Impedit dolorem libero. dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat, Dicta eius repellendus totam qui maiores odio a. Lorem ipsum dolor sit amet consectetur adipisicing elit, Impedit dolorem libero, dolor. fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat, Dicta eius repellendus totam qui maiores odio a, Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a! </p> </div>

How can I do make the linear gradient make left and right edges fade instead of top and bottom?

Also: This syntax is pretty neat but I fail to understand that how the args passed to linear-gradient are able to specify to fade the container only from top and bottom, and leave the rest as it is. In short, we have not specified any directions something like to-top and to-bottom so how's this actually working?

NOTE: I know this question is a duplicate of this . But the answer specified on the question does not solve my use case, as it's not fading out the inner content of the div.

Thanks: :)

Answer 1

here is the code. I put justify so you can see it better. Here is the example

 .container { width: 234px; text-align: justify; mask-image: linear-gradient(to left, transparent, black 40%, black 60%, transparent 100%); -webkit-mask-image: linear-gradient(to left, transparent, black 40%, black 60%, transparent 100%);

 <div class="container"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat. Dicta eius repellendus totam qui maiores odio a, Lorem ipsum dolor sit amet consectetur adipisicing elit, Impedit dolorem libero. dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat, Dicta eius repellendus totam qui maiores odio a. Lorem ipsum dolor sit amet consectetur adipisicing elit, Impedit dolorem libero, dolor. fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat, Dicta eius repellendus totam qui maiores odio a, Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a! </p> </div>

If you need less strong version of the fade:

<style>
.container {
    width: 234px;
    text-align: justify;
    mask-image: linear-gradient(to left,#00000030, black 20%, black 80%, #00000030 100%);
    -webkit-mask-image: linear-gradient(to left,#00000030, black 20%, black 80%, #00000030 100%);
    }
</style>

Answer 2

The default of linear gradients run from top to bottom. So, you need to use to left or to right with transparent. To make it more clear you have to reduce transparency. The transition is made between two-color or more which creates a band of colors that progress in a straight line. See here .

 .container { height: 234px; width: 234px; overflow: scroll; mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%); -webkit-mask-image: linear-gradient( to right,transparent, black 20%, black 80%, transparent 100%); }.container::-webkit-scrollbar { display: none; }

 <div class="container"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat. Dicta eius repellendus totam qui maiores odio a, Lorem ipsum dolor sit amet consectetur adipisicing elit, Impedit dolorem libero. dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat, Dicta eius repellendus totam qui maiores odio a. Lorem ipsum dolor sit amet consectetur adipisicing elit, Impedit dolorem libero, dolor. fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat, Dicta eius repellendus totam qui maiores odio a, Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a! </p> </div>