使容器中的任何内容都不透明

时间：2016-03-05 21:07:53

标签： javascript jquery html css

小提琴：https://jsfiddle.net/jzhang172/b09pbs4v/

我想要完成的是当用户滚动时，我希望有边框容器中的任何内容都显示为不透明（不透明度：1）。
它也很棒，因为它在盒子里不透明，有一种过渡到不透明度：1。

我不认为这是在CSS中实现的，我还在学习jquery | javascript。 谢谢！

作为一个额外的问题：这会如何影响移动网站，因为我当然不希望这种影响在移动设备上。我特别喜欢这个用于移动设备，只是不透明度：1。 

.box{
  height:500px;
  width:100%;
  background:gray;
  font-size:20px;
  overflow:auto;
 
}
.box p{
  opacity:.5;
}
.boxtwo{
  height:100px;
  width:100%;
  background:red;
  opacity:.5;
}
.make-me-solid{
  position:absolute;
  top:0;
  height:400px;
  width:100%;
  border:1px solid black;
}

body,html{
  margin:0;
  padding:0;
}
<div class="box">
 <div class="make-me-solid"></div>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
  </p>
  <div class="boxtwo"></div>
    <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
  </p>
    <div class="boxtwo"></div>
    <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
  </p>
  
</div>

2 个答案:

答案 0 :(得分：0)

看起来你试图做那种事情，但它应该是反过来的，不透明度可能不是一个好主意。

您可以通过媒体查询轻松禁用任何CSS 

.box {
  height: 500px;
  width: 100%;
  background: gray;
  font-size: 20px;
  overflow: auto;
}
.box p {
  opacity: .5;
}
.boxtwo {
  height: 100px;
  width: 100%;
  background: red;
  opacity: .5;
}
body,
html {
  margin: 0;
  padding: 0;
}
html:after {
  content: '';
  pointer-events: none;
  bottom: 0;
  height: 15vw;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
}
<div class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula
    risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus
    at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
  </p>
  <div class="boxtwo"></div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula
    risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus
    at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
  </p>
  <div class="boxtwo"></div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula
    risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus
    at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
  </p>

</div>

答案 1 :(得分：0)

如果我理解正确，我建议您使用以下jQuery代码。

这是附加到鼠标悬停，但如果你需要一些不同的东西，请告诉我。

对于移动连接，您可以将不透明度设置为1作为固定值。

$(function () {
  $('.boxtwo, make-me-solid').hover(
    function(e) {
      $(this).stop().animate({'opacity': 1}, 500, function() {
        $(this).css('opacity', 0.5);
      });
    },
    function(e) {
      $(this).stop().animate({'opacity': 0}, 500);
    });
});
.box{
  height:500px;
  width:100%;
  background:gray;
  font-size:20px;
  overflow:auto;

}
.box p{
  opacity:.5;
}
.boxtwo{
  height:100px;
  width:100%;
  background:red;
  opacity:.5;
}
.make-me-solid{
  position:absolute;
  top:0;
  height:400px;
  width:100%;
  border:1px solid black;
}

body,html{
  margin:0;
  padding:0;
}
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<div class="box">
    <div class="make-me-solid"></div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
    </p>
    <div class="boxtwo"></div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
    </p>
    <div class="boxtwo"></div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
    </p>

</div>

相关问题
最新问题