1
所以這是我想達到的目標：如何在文本上設置線性漸變？
（忽略綠松石細胞）
正如你可以看到，整個文本是模糊的，因爲購買gradiente的即應超過文本。當你點擊閱讀更多按鈕時，元素應該直到底部並移除漸變，當你點擊READ LESS時，它應該恢復到原來的狀態。
現在的設計看起來不像我在代碼中做的那樣，我完全需要它。但爲了得到與設計完全相同的東西，我正在用盡想法。
有什麼建議嗎？
這是代碼：
$(document).ready(function(){
var toggleReadMore = function() {
$('#read-more').click(function(e) {
$(this).prev().animate({'height': $(this).prev()[0].scrollHeight + 'px'}, 400);
$(this).hide();
$(this).next('#read-less').show();
});
$('#read-less').click(function(e) {
$(this).prev().prev().animate({height: '90px'}, 400);
$(this).hide();
$(this).prev('#read-more').show();
});
};
toggleReadMore();
}());#p {
height: 50px;
overflow: hidden;
}
#read-less {
display: none;
}
#read-more,
#read-less {
background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,255,255,1));
color: blue;
cursor: pointer;
position: absolute;
bottom: -20px;
padding: 15px 0;
text-align: center;
width: 100%;
}
#wrapper {
position: relative;
width: 400px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='wrapper'>
<p id='p'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </p>
<div id='read-more'>
READ MORE
</div>
<div id='read-less'>
READ LESS
</div>
</div>