CSSフィルタを使用しているときに罫線を維持する方法

Question

2つのピクセル境界を持つ画像タグ付きのdivがあります。このイメージにフィルタを適用してグレースケールまたは「白黒」にすると、イメージが白黒で表示されますが、境界線の色は保存されず、この特性も反映されます。私はまた、外側のdivにこれらの枠線を取るようにすることもできますが、divの幅は100％に設定されているため、外側の枠は画像そのものではなく境界線になります。

<div class="article-inline"><img src="images/bg/beach-girl.jpg" /></div> 

.article-inline 
{ 
    width: 100%; 
} 
.article-inline img 
{ 
    height: 400px; 
    max-width:100%; 
    max-height:400px; 
    overflow:auto; 
    display: block; 
    margin:auto; 
    filter: url(../desaturate.svg#greyscale); 
    -webkit-filter: grayscale(1); 
    -webkit-filter: grayscale(100%); 
    filter: gray; 
    filter: grayscale(100%); 
    border-left: solid 2px #ff0000; 
    border-top: solid 2px #ff0000; 
    border-right: solid 2px #ffd200; 
    border-bottom: solid 2px #ffd200; 
} 

Answer 1

あなたはそれをすることによってdivにimgを入れてinline-blockを適用し、境界線のプロパティのdivタグ内だけで、次の例のように

.article-inline { 
 
    width: 100%; 
 
    text-align:center; 
 
} 
 

 
.bordercl { 
 
    border-left: solid 2px #ff0000; 
 
    border-top: solid 2px #ff0000; 
 
    border-right: solid 2px #ffd200; 
 
    border-bottom: solid 2px #ffd200; 
 
    display: inline-block; 
 
} 
 

 
.article-inline img { 
 
    height: 400px; 
 
    max-width: 100%; 
 
    max-height: 400px; 
 
    /* overflow:auto; */ 
 
    display: block; 
 
    margin: auto; 
 
    filter: url(../desaturate.svg#greyscale); 
 
    -webkit-filter: grayscale(1); 
 
    -webkit-filter: grayscale(100%); 
 
    filter: gray; 
 
    filter: grayscale(100%); 
 
}

<div class="article-inline"> 
 
    <div class="bordercl"> 
 
    <img src="http://lorempixel.com/400/200/sports" /> 
 
    </div> 
 
</div>