我需要添加白色線性漸變到可滾動的div的底部,它應(yīng)該總是在一個div的底部。我使用位置固定來添加它,它可以在除IE >= 9以外的所有瀏覽器上運行。我需要它的所有瀏覽器,包括IE>=9。 應(yīng)該是這樣的——http://prntscr.com/ne3rfe
下面是div CSS代碼
.perfect-scrollbar::before {
content: "";
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
bottom: 0;
background: #7db9e8;
background: -moz-linear-gradient(top, #7db9e8 0%, #1e5799 101%);
background: -webkit-linear-gradient(top, #7db9e8 0%, #1e5799 101%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(255, 255, 255, .8) 101%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8', endColorstr='#1e5799', GradientType=0);
}
您可以使用父div/container上的:before或:after css選擇器來完成此操作:
選項1:
body {
margin: unset;
}
.container {
border: 3px solid black;
width: 500px;
height: 100px;
padding: 0;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
font-size: 30px;
font-family: calibri;
overflow-y: auto;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.container:before {
content: '';
position: absolute;
bottom: 0;
background: linear-gradient(to bottom, transparent, white);
height: 50%;
width: 100%;
}
<div class="container">
<div>item1 - test</div>
<div>item2 - test</div>
<div>item3 - test</div>
<div>item4 - test</div>
<div>item5 - test</div>
</div>
當(dāng)您可以絕對定位包含div時,由@ Tigerrrrr發(fā)布的選項2非常有用,但是在div需要位于普通文檔流內(nèi)的頁面上,這并不總是可行的。
這里舉個例子,不一定要絕對定位。
div.main {
background-color: black;
color: white;
}
h1 {
color: yellow;
}
div.songs-wrapper {
width: 100%;
position: relative;
}
div.songs-wrapper::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 15px;
height: 120px;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1) 100%
);
}
div.songs {
overflow-y: scroll;
height: 400px;
display: block;
scrollbar-width: thin;
scrollbar-color: #ff2222 #444444;
padding: 0px 5% 0px 5%;
}
div.songs ul {
margin: 0;
padding: 0;
padding-bottom: 50px; /* So we scroll just past the faded part */
-webkit-columns: 250px 3;
-moz-columns: 250px 3;
columns: 250px 3;
}
div.songs li {
text-align: center;
font-size: 1.2rem;
line-height: 1.4rem;
margin-bottom: 10px;
list-style-type: none; /* '\2022'; */
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
<div class="main">
<h1>Stuff Before</h1>
<div class="songs-wrapper">
<div class="songs">
<ul>
<li>
Accentuate the Positive <span>(F)</span>
</li>
<li>
Ain't Misbehavin' <span>(Bb)</span>
</li>
<li>
All of Me <span>(C)</span>
</li>
<li>
All of You <span></span>
</li>
<li>
All or Nothing at All <span>(C)</span>
</li>
<li>
All the Things You Are <span>(Ab)</span>
</li>
<li>
Almost Like Being In Love <span>(Bb)</span>
</li>
<li>
April in Paris <span>(Ab)</span>
</li>
<li>
Autumn Leaves <span>(Em)</span>
</li>
<li>
Be Careful, It's My Heart <span>(F)</span>
</li>
<li>
The Best Things in Life are Free <span>(C)</span>
</li>
<li>
Bewitched <span>(C)</span>
</li>
<li>
Blue Skies <span>(Eb)</span>
</li>
<li>
The Boulevard of Broken Dreams <span></span>
</li>
<li>
But Not For Me <span>(Bb)</span>
</li>
<li>
Bye Bye Blackbird <span>(F)</span>
</li>
<li>
Call Me <span>(G)</span>
</li>
<li>
Candy <span>(F)</span>
</li>
<li>
Cheek to Cheek <span>(Ab)</span>
</li>
<li>
Coquette <span>(C)</span>
</li>
<li>
Cry Me a River <span>(C)</span>
</li>
<li>
Don't Get Around Much Anymore <span>(C)</span>
</li>
<li>
East of the Sun and West of the Moon <span>(G)</span>
</li>
<li>
Embraceable You <span>(F)</span>
</li>
<li>
Ev'ry Time We Say Goodbye <span>(C)</span>
</li>
<li>
Fly Me To The Moon <span>(C)</span>
</li>
<li>
The Frim Fram Sauce <span>(Bb)</span>
</li>
<li>
From This Moment On <span>(Ab)</span>
</li>
<li>
Get Me to the Church on Time <span>(G)</span>
</li>
<li>
The Girl From Ipanema <span>(F)</span>
</li>
<li>
Have You Met Miss Jones? <span>(F)</span>
</li>
<li>
Hello, Young Lovers <span>(C)</span>
</li>
<li>
Honeysuckle Rose <span>(F)</span>
</li>
<li>
How Deep is the Ocean? <span>(C)</span>
</li>
<li>
I Believe in You <span>(G)</span>
</li>
<li>
I Can't Give You Anything But Love <span>(G)</span>
</li>
<li>
I Could Write a Book <span>(Bb)</span>
</li>
<li>
I Love Paris <span>(C)</span>
</li>
<li>
I Wish I Were in Love Again <span>(G)</span>
</li>
<li>
I Wish You Love <span>(Eb)</span>
</li>
<li>
I'll Be Seeing You <span>(Bb)</span>
</li>
<li>
I'll Never Smile Again <span>(C)</span>
</li>
<li>
I'm Beginning to See the Light <span>(G)</span>
</li>
<li>
I'm Gonna Sit Right Down and Write Myself a Letter <span>(C)</span>
</li>
<li>
I've Got My Love to Keep Me Warm <span>(Eb)</span>
</li>
<li>
I've Got the World On a String <span>(C)</span>
</li>
<li>
I've Got You Under My Skin <span>(C)</span>
</li>
<li>
I've Never Been In Love Before <span>(G)</span>
</li>
<li>
If I Didn't Care <span>(Bb)</span>
</li>
<li>
If I Were a Bell <span>(C)</span>
</li>
<li>
In the Wee Small Hours of the Morning <span>(C)</span>
</li>
<li>
Is You Is, Or Is You Ain't My Baby? <span>(Ab)</span>
</li>
<li>
It All Depends on You <span>(G)</span>
</li>
<li>
It Don't Mean a Thing (If It Ain't Got That Swing) <span>(Bb)</span>
</li>
<li>
It Had to be You <span>(Eb)</span>
</li>
</ul>
</div>
</div>
<h1>Stuff After</h1>
</div>
我在這里修改答案,但不喜歡手動重置漸變顏色,而不是& quot繼承的& quot從背景來看。一旦我找到了掩模方法,做了更多的實驗和梯度規(guī)格讀數(shù),我就想到了一個簡單而靈活的解決方案:
.container {
height: 5em;
overflow: auto;
-webkit-mask-image: linear-gradient(to bottom,
transparent .5em,
red 1em calc(100% - 1em),
transparent calc(100% - .5em));
mask-image: linear-gradient(to bottom,
transparent .5em,
red 1em calc(100% - 1em),
transparent calc(100% - .5em));
}
<div class="container">
<div class="content">content is here</div>
<div class="content">content is here</div>
<div class="content">content is here</div>
<div class="content">content is here</div>
<div class="content">content is here</div>
<div class="content">content is here</div>
<div class="content">content is here</div>
<div class="content">content is here</div>
<div class="content">content is here</div>
</div>
上一篇python 是美國的
下一篇python 顯示正波形