1

我想知道如何在底部图像上制作阴影，我试图检查源代码但我什么也没找到。任何想法？谢谢

例如在封面图片中或在您的个人资料页面上的小部件朋友中查看名称下方有一个阴影以便更好地查看颜色白色的名称

4

4 回答 4

2

您似乎正在寻找渐变。一个选项是使用图像执行此操作，但也可以使用 css 执行此操作。看看这个页面。或在 Google/Bing/.. 搜索css3 渐变。

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

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 像素图像。图像 fb 使用

我摸索了一下，拿到了这个小提琴。这是我使用的代码：

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，你会发现你可以很容易地缩放它。

于 2013-08-31T22:48:16.727 回答
0

Using a gradient background. I'm assuming you're talking about the homepage before you login. If you really mean shadow please be more specific.

Edit in response to comment:

Yes. That is not a shadow, but a gradient background image repeated.

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

Use google image search and search for term "gradient".

This is achieved by taking a small slice of the image and repeating it as a background along the x axis.

于 2013-08-31T21:46:20.643 回答
0

Create a shadow class in your css file

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

Then apply it to a div (or something else) in your HTML.

<div class="shadowThing">
    <!--some content here-->
</div>
于 2013-08-31T21:48:11.087 回答
0

使用 CSSbox-shadow属性

语法是：

box-shadow: h-shadow v-shadow blur spread color inset；

所以像这样使用：

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

看这个小提琴的例子

当应用于设置了高度和宽度属性的块元素时，它将看起来像这样。

演示

于 2013-08-31T22:07:04.477 回答