使用css可以將圖像反映爲陰影嗎？

我已經看到了很多設計的這種風格：圖像顯示反射的使用css可以將圖像反映爲陰影嗎？

Image Reflection Shadows

樣品：

我只是想知道，如果這甚至有可能代碼。我一直在尋找一種方法來做到這一點，但沒有找到運氣。我只想在這方面獲得一些許可。這只是爲了看起來還是可能？

來源

2016-12-01 Sergio Estrada

我覺得有沒有簡單的方法可以做到這一點與CSS將更容易導出圖像的方式....但這裏是一個嘗試：http://codepen.io/anon/pen/KNZvLN – DaniP

是的！爲此，您可以用CSS和filter: blur();

演示http://jsbin.com/cecohu/edit?html,css,output

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
} 
 

 
img { 
 
    height: auto; 
 
    max-width: 100%; 
 
} 
 

 
.wrap { 
 
    margin: 0 auto; 
 
    max-width: 400px; 
 
    position: relative; 
 
} 
 

 
.image { 
 
    display: block; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
.shadow { 
 
    bottom: -30px; 
 
    filter: blur(20px);/* this is the magic part */ 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    transform: scale(0.95); 
 
    width: 100%; 
 
    z-index: 1; 
 
}

<div class="wrap"> 
 
    <img class="image" src="http://lorempixel.com/800/450/nature/3/" alt="rocky shore"> 
 
    <img class="shadow" src="http://lorempixel.com/800/450/nature/3/" alt=""> 
 
</div>

來源

2016-12-01 19:34:36

是的，我知道有比我更好的答案。 +1 –

哇，非常感謝你泰德！這正是我所希望的！ –

@SergioEstrada沒問題！請注意，只有最新版本的IE支持CSS過濾器http://caniuse.com/#feat=css-filters –

是的，當然。你必須使用CSS3 -webkit-box-reflect: below;
很好的例子是here

來源

2016-12-01 19:32:37

尼斯知道這一個。我試過這個'-webkit-box-reflect：低於-5px -webkit-gradient（線性，左上，左下，從（透明），色阻（89％，透明）到（白色））;' – Sagar

我還沒有遇到像所描述的事情來了。 然而，你可能有興趣在以下

Using CSS Filter property to Create Ambient-Light round Images

它工作時，有顏色和背景

所有信貸原作者上Codepen.io之間的高對比度更好

body {background: #111} 
 

 
.img { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 40px; 
 
    height: 236px; 
 
    width: 420px; 
 
    border-radius: 5px; 
 
    box-shadow: 0px 50px 100px -30px rgba(0,0,0,1); 
 
} 
 
.img:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    filter: blur(50px) contrast(3); 
 
    z-index: -1; 
 
} 
 

 
.first, .first:after { 
 
    background: url("http://images.smh.com.au/2013/02/13/4028970/--art_wrestling_20130213154720739962-420x0.jpg"); 
 
} 
 

 
.second, .second:after { 
 
background: url("http://images.theage.com.au/2014/04/02/5317898/ZAH_hawk_LW-20140402235602816699-420x0.jpg"); 
 
}

<body> 
 
<div class="container"> 
 
<div class="img first"></div> 
 
<div class="img second"></div> 
 
</div> 
 
</body>

來源

2016-12-01 19:46:14

使用css可以將圖像反映爲陰影嗎？

回答

相關問題