Изображение в оттенках серого с цветной рамкой

Мне нужно поставить набор черно-белых изображений с цветными границами на странице. Я не хочу редактировать изображения в Photoshop, так как позже могут быть некоторые динамически добавленные; следовательно, я использовал соответствующий filter:grayscale(100%).Изображение в оттенках серого с цветной рамкой

img.myImage { 
    display: block; 
    position: relative; 
    border: 6px solid #0090ff; 
    width: 85%; 
    margin: 0 auto; 

    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 
}

Однако оно влияет на цветную рамку, которая также становится сероватой. Существует ли безболезненное обходное решение?

источник

2015-12-11 Balabeque

Есть ли какой-либо причине для вас не помещать обертку вокруг этого изображения, обеспечивающего границу? –

Это зависит от того, как выглядит граница. Если это похоже на прямоугольный фрейм, который вам известен, я могу подумать о возможном взломе ... Лучшее решение, однако, состоит в том, чтобы использовать два изображения. –

@MrLister, это круглое ч/б изображение со светло-голубой сплошной рамкой. На самом деле, я попытался поместить его в оболочку, и он работает, но я надеялся найти обходное решение с меньшим количеством кода (как разметки, так и CSS). – Balabeque

Поскольку img не принимает :after/:before, и так как filter кажется, применяются на дочерние элементы, единственное решение, которое я могу придумать является основным:

div { 
 
    display: inline-block; 
 
    background-color: #0090ff; 
 
    padding: 6px; 
 
    width: 200px; 
 
} 
 

 
img { 
 
    display: block; 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
    width: 100%; 
 
}

<div> 
 
    <img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" /> 
 
</div>

источник

2015-12-12 12:30:50 sodawillow

Изображение в оттенках серого с цветной рамкой

ответ

Смежные вопросы