相关疑难解决方法(0)

是否有可能只用一个div(没有背景图像/前景图像/图层)来实现这一点？

我期待创造一个效果是这样的,但我的网站具有动态background-color.请注意,此示例使用白色叠加层,但不适用于不同的背景.

p {
    width: 300px;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    position: relative;
}
p:after {
    content: "";
    width: 100px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
}

我希望做的是设置一个CSS不透明度渐变.这种作品,但代码太乱了.看看第二个例子,我可以在jQuery中实现它,但有没有办法在CSS中完全做到这一点？

我想替换一个允许用户使用Bootstrap折叠手风琴"阅读更多"的脚本.我的问题是,据我所见,手风琴是打开还是关闭.

有没有人知道在封闭模式下显示某些文本的选项？

在我正在使用的脚本中,我可以通过更改文本区域的高度来显示一些文本,但在Bootstrap中此选项不起作用.当我更改.in或.out(控制文本区域高度的css)的高度时,它只是打开和关闭直到该高度.有人为此找到了解决方法吗？

我的HTML:

<div class="accordion" id="accordion2"> 
  <div class="accordion-group"> 
    <div class="accordion-heading"> 
      <a class="accordion-toggle"  href="#collapseOne"
         data-toggle="collapse" data-parent="#accordion2">
        TITLE OF THE COLLAPSE 
    </a> 
    </div> 
    <div id="collapseOne" class="accordion-body collapse in"> 
      <div class="accordion-inner"> 
        DATA IN THE COLLAPSE 
      </div> 
    </div>
  </div>
</div>

所以这就是我想要实现的目标：

（忽略绿松石细胞）

正如你所看到的，整个文本是模糊的，因为它应该在文本上的渐变。当您单击 READ MORE 按钮时，该元素应移动到底部并移除渐变，而当您单击 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: …