用阴影隐藏内容

Question

我需要使用JS / CSS / HTML5将内容隐藏在带阴影的div容器中。它应该与我在这里发布的图像类似。阴影的颜色也应该是可以改变的。

如果是重复的问题，请参阅原始问题。

HTML：

<div class="makehidden">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

CSS：

.makehidden{
height: 100px;
width: 600px;
box-shadow:10px 10px 50px 20px pink inset;
}

Answer 1

一种方法是制作要隐藏的div的内容position:relative;，然后在其中包含一个元素：

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: /* Some gradient that you could generate */

Gradient Generator

这将完全覆盖元素背景渐变作为叠加。

Answer 2

我会用这样的东西：

http://jsfiddle.net/5BsXs/

.hidden-with-shadow {
    width: 200px;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.hidden-with-shadow:after {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}

所有这些可怕的背景内容都只是在每个浏览器上创建正确渐变（白色到透明）的css规则。您可以通过将#ffffff与所需颜色交换来更改颜色。我建议你使用像罗盘（scss）这样的东西，所以你可以这样写：

background: linear_gradien(rgba(255,255,255,255), rgba(255,255,255,0))

Answer 3

你在这里。希望它会对你有所帮助。

HTML

<div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget elit sed metus pellentesque rutrum. Etiam sodales auctor eros, id luctus elit. In hac habitasse platea dictumst. Sed cursus nec sem a tincidunt. Proin vitae nulla augue. Vestibulum adipiscing a magna sit amet convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    <div class="shadow"></div>
</div>

CSS

.text {
    position: relative;
}
.shadow {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 75%;
    width: 100%;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.2)));

}

http://jsfiddle.net/Gj6UZ/2/

Answer 4

将您的box-shadow更改为box-shadow: 0 -50px 50px -30px pink inset;

http://jsfiddle.net/7ukhp/1/