Вход

Просмотр полной версии : прозрачность сверху вниз

javascrip
12.02.2020, 22:52
подскажите как сделать чтобы в блоке была прозрачность сверху вниз? вверху 100% а к низу 0
рони
12.02.2020, 23:39
javascrip,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.gradient {
width: 500px;
}
.gradient:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 1) 50%);

}


</style>

</head>
<body>
<div class="gradient"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, nesciunt, quo, maxime, sunt voluptatibus quaerat soluta mollitia esse ipsa eos iusto odit consectetur? Soluta, provident, quod facere animi ut quos.</div>
<div>Voluptatibus, distinctio, sequi, eaque nostrum dicta numquam blanditiis placeat amet labore mollitia temporibus eligendi nobis. Repellat, pariatur, neque, quidem dolore sequi repellendus veritatis voluptas molestiae fuga temporibus tempora eveniet suscipit.</div>
<div>Veniam, rem fugit debitis modi sit beatae perspiciatis consequatur dignissimos ullam vel! Quaerat, ut, deserunt in quasi earum vel perspiciatis sapiente! Ad, consectetur id ex officiis aliquam asperiores at praesentium.</div>
<div>Magni, expedita, qui, nam voluptates ex consectetur ab soluta fuga odit dolor possimus praesentium corporis vel earum repellendus asperiores reprehenderit! Natus mollitia ad unde accusantium ipsa incidunt dicta omnis! Earum.</div>
<div>Commodi, reprehenderit, fugiat ullam in eius unde modi asperiores consectetur et voluptatum quo officiis magnam eum fuga quaerat vel fugit reiciendis nulla impedit aliquam architecto soluta maxime nesciunt distinctio deserunt.</div></div>
</body>
</html>
javascrip
12.02.2020, 23:53
не то, нужно чтобы текстовый блок сверху 100%, а к низу прозрачность все меньше и меньше
javascrip
12.02.2020, 23:55
бэкграунт не должен меняться , там уже есть
javascrip
13.02.2020, 00:02
как на картинке, только тут это сделано с черным бг
Malleys
17.02.2020, 23:14
Можно сделать при помощи маски, тогда только у текста будет уменьшаться непрозрачность.<section>
<p>Lo­rem ip­sum do­lor sit amet con­sec­te­tur adi­pi­si­cing elit. Est ve­ro ve­ri­ta­tis, mo­di hic nam ac­cu­san­tium ma­xi­me mi­nus. Re­rum tem­po­ra li­be­ro, od­io ni­si ve­ri­ta­tis de­le­ni­ti in­ven­tore quas ac­cu­san­tium do­lo­res dic­ta ea!</p>
<button>Read more</button>
</section>
<style>
section {
background: black;
color: white;
padding: 1em;
position: relative;
font-size: 150%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://picsum.photos/200/300/?blur=2) center/cover;
max-width: 15em;
}

section > p {
--mask: linear-gradient(to bottom, red 10%, transparent);
-webkit-mask: var(--mask);
mask: var(--mask);
margin: 0;
text-indent: 0.5em;
text-align: justify;
}

section > button {
all: unset;
position: absolute;
bottom: 1.5em;
right: 0; left: 0;
margin: auto;
background: linear-gradient(to bottom, #3f749b, #78a5cc);
padding: 0.25em 0.75em;
border-radius: 1em;
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
}
</style>

Или же поместить градиент над текстом, что затронет также и фон.<section>
<p>Lo­rem ip­sum do­lor sit amet con­sec­te­tur adi­pi­si­cing elit. Est ve­ro ve­ri­ta­tis, mo­di hic nam ac­cu­san­tium ma­xi­me mi­nus. Re­rum tem­po­ra li­be­ro, od­io ni­si ve­ri­ta­tis de­le­ni­ti in­ven­tore quas ac­cu­san­tium do­lo­res dic­ta ea!</p>
<button>Read more</button>
</section>
<style>
section {
background: black;
color: white;
padding: 1em;
position: relative;
font-size: 150%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://picsum.photos/200/300/?blur=2) center/cover;
max-width: 15em;
}

section > button {
all: unset;
position: absolute;
bottom: 1.5em;
right: 0; left: 0;
margin: auto;
background: linear-gradient(to bottom, #3f749b, #78a5cc);
padding: 0.25em 0.75em;
border-radius: 1em;
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
}

section > p {
margin: 0;
text-indent: 0.5em;
text-align: justify;
position: relative;
}

section > p::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to bottom, transparent, black);
margin: -1em;
pointer-events: none;
}
</style>