如何使用CSS在圖像上創建虛線陰影效果？

Question

我想創建的效果，可以在網站http://www.murmure.me/當你懸停在他們的圖像上看到。

我知道他們使用兩個不同的圖像，但我希望能夠沒有2個圖像，只有一個圖片（沒有點的圖片）和通過使用CSS的效果。可能嗎 ？

Answer 1

Mikel，您無法使用CSS和單個圖像實現絲印效果。以任何跨瀏覽器兼容的方式，這不會很快發生。當你可以使用HLSL或類似的方式自定義編程CSS過濾器時......也許，最終，當你可以使用HLSL或類似方法自定義編程CSS過濾器時......但是對於目前來說，即使使用接近未來的CSS過濾器，我也不認爲他們將會提供絲印，然後，您需要擔心這一點以及過渡效果，然後您需要擔心瀏覽器支持，以及其他瀏覽器的2圖像回退。

ie：你必須創建第二張圖片，並寫出你希望有CSS過濾器的2張圖片後備，以避免首先製作第二張圖片。

Answer 2

這是非常接近：http://jsfiddle.net/LfXN3/8/

但是，它需要一個第二元件（未形象，只是元素）。僞元素方法不起作用，因爲它的不透明度不能動畫。

<div> 
    <div id="overlay"></div> 
</div>​ 

CSS

div{ 
    background:url(http://placekitten.com/600/600) center center; 
    width:400px; 
    height:400px; 

    -webkit-transition:all 2s; 
    -webkit-filter: grayscale(100%); 
} 

div:hover{ 
    -webkit-filter: grayscale(0%); 
} 

div #overlay{ 
    opacity:.5; 
    display:block; 
    background: -webkit-linear-gradient(45deg, #777 25%, transparent 25%, transparent), -webkit-linear-gradient(-45deg, #777 25%, transparent 25%, transparent), -webkit-linear-gradient(45deg, transparent 75%, #777 75%), -webkit-linear-gradient(-45deg, #000 75%, #777 75%); 

    background-size:2px 2px; 
    width:400px; 
    height:400px; 

    -webkit-transition:opcaity 2s; 
} 

div:hover #overlay{ 
    opacity:0; 
} 

我已經成功地獲得通過將達德利·斯托裏的技術爲礦山那點點接近：http://jsfiddle.net/LfXN3/14/

的主要區別是這樣的：

div #overlay{ 
    opacity:1; 
    display:block; 
    background: -webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
-webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
    url(http://placekitten.com/600/600); 
    background-position: 0 0, 2px 2px, center center; 
    background-size:4px 4px, 4px 4px, 600px 600px; 
    width:400px; 
    height:400px; 

    -webkit-transition:opacity 2s; 
} 

Answer 3

儘管可以使用css3 g將彩色圖像轉換爲灰度圖reyscale過濾器，它目前只適用於Chrome。

-webkit-filter: grayscale(100%); 

無需使用jQuery即可獲得該效果的解決方法是使用兩個圖像和css3轉換。

-webkit-transition: opacity 0.5s; 
-moz-transition: opacity 0.5s; 
-o-transition:  opacity 0.5s; 

Answer 4

如何使用原始圖片（不點），只是做一個小點的另一幅圖像（像http://www.scottecatalog.com/images.nsf/Images/dot/ $ FILE/Dot.gif）和一個帶有重複屬性，各地重複點原始圖像與點之間具有正確的空間並具有z-index屬性（以便將點放置在原始圖像的字體中）？

我們仍在使用2張照片，但至少對任何圖像複製這種效果都很容易，無論您使用的是哪種原始圖像。 會有道理嗎？

Answer 5

是的，可以用一個單一的圖像，使用普通的CSS3和一個過濾器：demo, and a brief explanation, on my blog。現在，Firefox中的灰度到顏色轉換看起來特別慢（因爲它必須使用與過濾器相同的SVG），所以我暫時將它從演示中刪除。

div#silkscreen { 
background: 
-webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
-webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
url(lotus.jpg); 
background: -moz-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
-moz-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
url(lotus.jpg); 
background-position: 0 0, 2px 2px; 
background-size:4px 4px, 4px 4px, cover; 
-webkit-filter: grayscale(1); 
filter: url(desaturate.svg#greyscale); 
filter: grayscale(1); 
transition: 1.3s; 
} 
div#silkscreen:hover { -webkit-filter: grayscale(0); filter: none; } 
div#silkscreen img { max-width: 100%; opacity: 0; }} 
div#silkscreen:hover { -webkit-filter: grayscale(0); } 
div#silkscreen img { max-width: 100%; opacity: 0; } 

<div id=silkscreen> 
<img src=lotus.jpg alt=""> 
</div> 

我希望這有助於！

Answer 6

感謝您對我們網站的關注。

您可以使用sprite技術。

http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html 也用 「DECOUVREZ LA PROGRAMMATION」 的形象上http://nordik.org/

很簡單TU使用;）