Question

我正在创建一个div，其内容长于我想要查看的高度，所以我使用了20em的高度，并使溢出：滚动。这项工作很棒，但我想为它添加一些效果。

我怎么能这样做，顶部和底部50px的不透明度为0.7？所以当内容滚动“离开”时它会产生效果。

谢谢！

<div>
<ul>
   <li>long list here</li>
   <li>long list here</li>
   <li>long list here</li>
   <li>long list here</li>

</ul>

风格：

height:25em;
overflow:scroll;

Answer 1

DEMO

CSS：

#wrapper {
    position: relative;
}
#wrapper:before, #wrapper:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 30px; /* Height of the effect */
}
#wrapper:before {
    top: 0;
    /* Use your background color, assuming white: */
    background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}
#wrapper:after {
    bottom: 0;
    /* Use your background color, assuming white: */
    background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}
#mydiv {
    background: red;
    height: 20em;
    overflow: auto;
    border: 0 solid transparent;
    border-width: 10px 0; /* 10px to be able to read first and last lines */
}

HTML：

<div id="wrapper">
    <div id="mydiv">
        Your content
    </div>
</div>

Answer 2

您可以在顶部和底部添加两个图层，请注意它将覆盖您的内容，因此我建议它不会超过20px。以下是透明封面的示例，但您可以使用漂亮的PNG渐变：

<!doctype html>
<html>
<head>

    <meta charset="utf-8">
    <title>Opacity</title>

    <style type="text/css">
    .fixed_height {
        position: relative;
    }
    .fixed_height_content {
        padding: 20px 0;
        height: 100px;
        overflow-y: scroll;
    }
    .cover_top {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 20px;
        background: red;
        opacity: .3;
    }
    .cover_bottom {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 20px;
        background: red;
        opacity: .3;
    }
    </style>

</head>
<body>

    <div class="fixed_height">

        <div class="fixed_height_content">
            <p>Some content<br />more<br />more<br />more<br />more</p>
            <p>Some content<br />more<br />more<br />more<br />more</p>
            <p>Some content<br />more<br />more<br />more<br />more</p>
            <p>Some content<br />more<br />more<br />more<br />more</p>
        </div>

        <div class="cover_top"></div>
        <div class="cover_bottom"></div>

    </div>

</body>
</html>

Answer 3

我认为您可能会喜欢这样。试试这个。

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
    <shape android:shape="rectangle">
        <solid android:color="@color/colorPrimary"/>
        <corners android:radius="90dp"
            />
    </shape>
</item>
<item android:width="100dp" >
    <shape android:shape="rectangle">
        <solid android:color="#ffff"/>
        <corners android:radius="90dp"/>
    </shape>
</item>
<item android:width="90dp" >
    <shape android:shape="rectangle">
        <solid android:color="@color/red"/>
        <corners android:radius="90dp"
            />
    </shape>
</item>

我的div很像

<style>    
#boxBorder {
    height: 3em;
    overflow: hidden;
    }
#boxBorder:hover {
height: 5em;
overflow: hidden;
}
#boxBorder:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100px; 
    bottom: 0;
    background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(256,256,256,0));   
}
</style>

谨慎的宽容。

如何使div的顶部和底部透明

3 个答案: