Question

我试图做一些类似于这张照片的事情（关于阴影在底部的图片）。 Photo with Shadow

这是到目前为止所做的：

＆＃13;

<style>
    h2.header {
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    }
    .wrapper {
        display: inline-block;
        margin-top: 25px;
        position: relative;  
    }

    .wrapper img {
    display: block;
    max-width:100%;
    }

    .wrapper .overlay {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.25);
    color:white;
    }
    </style>

    <div class="wrapper">
    <img src="http://www.kavoir.com/img/text-over-image.jpg"  alt="" />
    <div class="overlay">
    <h2 class="header">Restaurant Stowaway Devours $800 of Roast Goose and Wine</h2>

     </div>
     </div>

＆＃13;

Answer 1

你可以让一个以图像为背景的div，然后在其中放一个渐变对象。

body {
  width: 100%
  height: 100vh;
  margin: 0px;
  overflow: hidden;
}

#image {
  width: 660px;
  height: 200px;
  position: relative;
  background: url('http://i.imgur.com/HNj6tRD.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#grad {
  width: 660px;
  height: 200px;
    background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); /* Standard syntax (must be last) */
}

<div id="image" alt=image><div id=grad></div></div>

在照片上显示阴影

1 个答案: