Question

我试图想办法让网页的底部有一个z-index：1;这个PNG图像：http://i.imgur.com/PiRUJ8h.png这样，当人们滚动时，它就好像页面上的文字正在淡入。我希望这是有道理的。我想让图像的宽度100％到网页尺寸，当然每个人的屏幕分辨率，这都不能用HTML中的div风格来完成，这很烦人。我希望我可以做宽度= 100％或具有div风格的东西，但它无法完成，所以有没有办法解决这个问题？

Answer 1

我怀疑这更接近你想要的东西：

.container {position:relative }
.content {
  overflow:scroll; 
  height: 200px; /* <-- could be anything. just for demo */
}

.gradient {
  position:absolute; bottom:0;left:0;right:0;
  height: 40px;
  /* use a png if you prefer, but this works: */
  background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1)); 
  pointer-events:none; /* don't block clicks */
  }

<div class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet. </p> <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p> <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>
  </div>
  <div class="gradient"></div>
</div>

（效果有点微妙;改变渐变的颜色以更清楚地看到它在做什么）

根据下面的评论，这里应用于框阴影的技术相同（但是在内容上方而不是在另一个答案中位于下方）：

.container {position:relative }
.content {
  overflow:scroll; 
  height: 200px; /* <-- could be anything. just for demo */
}

.gradient {
  position:absolute; bottom:0;left:0;right:0;top:0;
  box-shadow: 0 0 40px #000 inset;
  pointer-events:none; /* don't block clicks */
  }

<div class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet. </p> <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p> <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>  <p>Lorem ipsum dolor sit amet. </p>
  </div>
  <div class="gradient"></div>
</div>

Answer 2

在这种情况下，可以使用<div>或<body>或任何块级元素来完成，是的，可以使用现代浏览器中的CSS来完成。看看代码段：

＆＃13;

* {margin: 0; padding: 0;}
.wrapper {
  -webkit-box-shadow: inset 0px 10px 50px 10px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 10px 50px 10px rgba(0,0,0,0.75);
  box-shadow: inset 0px 10px 50px 10px rgba(0,0,0,0.75);
  height: 300px;
  padding: 15px;
}

＆＃13;

<div class="wrapper">
  <p>Hello</p>
</div>

＆＃13;

如果您希望阴影停留在一个地方，可以使用position: absolute作为内容。

＆＃13;

* {margin: 0; padding: 0;}
html, body {
  height: 100%;
}
body {
  -webkit-box-shadow: inset 0px 10px 50px 10px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 10px 50px 10px rgba(0,0,0,0.75);
  box-shadow: inset 0px 10px 50px 10px rgba(0,0,0,0.75);
}
.wrapper {position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; padding: 15px;}

＆＃13;

<div class="wrapper">
  <p>Hello</p>
</div>

＆＃13;

注意：如评论中所述，W3C建议不要设置html元素的样式。我在第二个片段中完成了演示目的。

Answer 3

我不确定我是否关注？但这就是我摆脱它的原因。希望这有助于!!!!

p{
  color: white;
  margin:20px;

}

h1{
  color: black;
  text-shadow: 0 0 2px red;
  position: fixed; 
  margin-top: -5%;
  margin-left: 32%;
  }

.image{
  position: relative;
  width: 100%;
  height: 150px;
  background-image: url('http://webcdn.triongames.com/defiance/images/splash/defiance_newshrub_3kpx_w_2.png');
  background-size: 100% 100%;
  margin-top: 10%;
 }

.container{
  position: relative;
  height: 350px;
  width: 100%;
  background-color: black; 
  margin-top: -40px;
}

.gradient {
  position:fixed;
  height: 40px;
  background: linear-gradient(rgba(255,255,255,0),RGBA(0, 0, 0, 1)); 
  pointer-events:none;
  bottom:0;
  left:0;
  right:0
 }

<h1>Hello World</h1>


<div class='image'></div>
<div class='container'>
  <p>Lucas ipsum dolor sit amet abyssin jettster jabba katarn arkanian ti klatooinian vos nelvaanian darth. Nadon droch axmis droopy maximilian jar ki-adi-mundi. Wharl priapulin oppo rattatak bibble jettster skakoan. Droid lobot freedon fett dulok tib rishi. Taun xexto carnor katarn shaak kashyyyk kushiban shmi. Woostoid dantooine kasan timoliini joruus jade soontir raynar vima-da-boda. Fisto d8 kit darth epicanthix kubaz jerec vor. Bria cordé onimi karrde rahm tatooine tatooine aurra. Kyp rebo chadra-fan habassa emtrey falleen mccool.

Sola clawdite dunhausen antilles coway gand ubb. Neimoidian darth porkins gotal skirata gado vel. Klatooinian joelle boss duro. Darth cal balosar veila tiin teek san malastare gonk. Billaba kendal dak thisspias braxant. Caamasi zorba darth lando seerdon er'kit selonian shadda. Veila sabé bibble nute leia. Di iktotchi nass nosaurian wicket nunb mccool. C-3p0 ord lars winter geonosis whill nute jinn. Mustafarian aparo tib luuke aayla jeremoch sith han piell. Skywalker bail teneniel kohl. Quence argazdan solo fisto.   </p>
  <div class='gradient'></div>
</div>

我可以淡化网页的边缘吗？

3 个答案: