我想知道底部圖像上的陰影是如何製作的，我試圖檢查源代碼，但是我什麼都沒發現。任何想法？謝謝底部圖像上的陰影像facebook

例如封面圖片或看到名下的個人資料頁面上的小部件朋友那裏是看顏色白色

2013-08-31 fabrizio

像什麼..的影子？ Facebook是巨大的，你指的是什麼？ –

你是指模態出現時的背景？你可以添加一個快照圖像的問題？ –

@fabrizio，你可以拍攝一個截圖，將相關部分裁剪出來，張貼在imgur上，然後將url添加到你的文章中？ – KyleMit

你似乎在尋找一個梯度。一個選項是用圖像來做到這一點，然而這也可以用css來完成。退房this page。或搜索谷歌/ Bing/.. css3梯度。

我做了一個快速的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 */

UPDATE

縱觀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;

這是一個1x95px圖像創建覆蓋。 The image fb uses

我已經摸索了一下，進入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，你會看到你可以輕鬆地縮放它。

來源

2013-08-31 22:48:16 jdepypere

是好的thnks，但這不工作的形象爲什麼？ – fabrizio

@fabrizio：我已經用Facebook的方式更新了我的答案。 – jdepypere

使用漸變背景的更好的名字了一層陰影。我假設你在登錄之前正在討論主頁。如果你真的認爲影子請更具體。

編輯迴應評論：

是的。這不是一個陰影，而是重複的漸變背景圖像。

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

使用谷歌圖片搜索和搜索術語「漸變」。

這是通過取一小片圖像並沿着x軸重複它作爲背景來實現的。

來源

2013-08-31 21:46:20 happyhuman

封面圖片中的示例 – fabrizio

我不在Facebook上，不會註冊只是爲了查看您的意思。顯示屏幕截圖。 – usr2564301

@fabrizio編輯上面的答案... – happyhuman

在你的CSS文件中創建一個影子類

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

然後將其應用到您的HTML股利（或別的東西）。

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

來源

2013-08-31 21:48:11 zkanoca

不，我的意思是名下的影子。謝謝你同樣的答案 – fabrizio

使用CSS box-shadow財產

的語法是：

的box-shadow：H-影V-陰影模糊蔓色彩插圖;

所以使用這樣的：

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

爲例

它看起來像這樣當施加到具有高度和寬度的屬性設置的塊元件見本fiddle。

demo

來源

2013-08-31 22:07:04 KyleMit

底部圖像上的陰影像facebook

回答

UPDATE

相關問題