像Facebook这样的底部图像上的阴影

Question

我想知道如何在底部图像上制作阴影，我试图查看源代码，但我一无所获。任何的想法？谢谢

封面图片中的示例或者在您的个人资料页面上的小部件朋友看到的名称下面有一个阴影，可以看到更好的颜色白名称

Answer 1

您似乎在寻找渐变。一个选项是使用图像执行此操作，但这也可以使用css完成。查看this page。或者在Google / Bing / ..中搜索 css3 gradient 。

我快速fiddle我在我链接的生成器中生成的内容可能符合您的需求。您可以将背景颜色更改为您想要的任何颜色（在我将其设置为红色的示例中），以显示它是透明的。

background: -moz-linear-gradient(top, rgba(43,43,43,0) 0%, rgba(43,43,43,0) 40%, rgba(43,43,43,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(43,43,43,0)), color-stop(40%,rgba(43,43,43,0)), color-stop(100%,rgba(43,43,43,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002b2b2b', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-9 */

更新

看看Facebook代码，他们似乎正在使用图像来覆盖图像。如果您查看来源，您会看到a#fbCoverImageContainer.coverWrap.coverImage包含两个重要的孩子，img.coverPhotoImg.photo.img，其中包含背景图片。通常，此图像将比横幅本身的高度进一步扩展，因为仅显示图像的一部分。 其他重要的孩子是div.coverBorder。看它的来源它跟随css：

background: url(/rsrc.php/v2/yJ/r/UgNUNkKQar6.png) bottom left repeat-x;

这是创建叠加层的1x95像素图像。

我偶然发现了一点，到了this fiddle。这是我使用的代码：

<强> HTML

<div class='myHeader'>
    <img src='http://lorempixel.com/output/people-q-c-747-438-1.jpg' />
    <div class='coverBorder'></div>
</div>

<强> CSS

.myHeader{
    display:block;
    position:relative;
    height:315px;
    overflow:hidden;
}
.coverBorder{
    background: url(http://i.imgur.com/UGqidBk.png) bottom left repeat-x;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
}

如果你看小提琴，你可以清楚地看到图像在div之外扩展，但overflow:hidden;隐藏了这个。目前，叠加层扩展到图像之外，因为div.myHeader没有宽度，因此设置为100％。给它500px，你会发现你可以很容易地缩放它。

Answer 2

使用渐变背景。我假设您在登录之前正在谈论主页。如果你真的意味着影子请更具体。

编辑以回应评论：

是。这不是阴影，而是重复的渐变背景图像。

background: url(background-url.png) bottom left repeat-x;

使用谷歌图片搜索并搜索术语“渐变”。

这是通过拍摄一小片图像并将其作为沿x轴的背景重复来实现的。

Answer 3

在css文件中创建一个shadow类

.shadowThing
{
    box-shadow: 2px 2px 3px 2px #333;
}

然后将其应用于HTML中的div（或其他内容）。

<div class="shadowThing">
    <!--some content here-->
</div>

Answer 4

使用CSS box-shadow属性

语法为：

  

box-shadow：h-shadow v-shadow blur spread color inset;

所以请这样使用：

.shadow {
    box-shadow: 2px 2px 2px 2px #888888;
}

请参阅此fiddle以获取示例

当应用于设置了height和width属性的块元素时，它将如下所示。