CSS3: Как получить полупрозрачное изображение границы, чтобы показать цвет границы позади

Question

У меня есть div-обертка с правой границей в 20px.Я установил цвет границы, а затем изображение границы с полупрозрачным png.Я сделал это, чтобы иметь возможность изменить цвет ниже с помощью JavaScript, сохраняя при этом текстуру PNG.Но цвет фона «фона» становится белым, как только я использую правило изображения границы, или совсем исчезает ...

HTML просто:

<div class="wrapper clearfix">
...
</div>

И CSS:

.wrapper{float: left; min-height: 100%; border-right: 20px solid lime url('../img/elastic.png'); position: relative;}

Спасибо, ребята, за вашу помощь

(Первое сообщение здесь, в этом потрясающем сообществе, надеюсь выздороветь)

Answer 1

Извините, но border-image не предназначен для использования в сочетании с border-color.

В соответствии с W3C :

" Свойство 'border-image' определяет изображение для использования вместо стилей границ, заданных свойствами 'border-style'".

Как вы можете видеть из этого Fiddle , любой стиль рамки игнорируется.Только ширина границы имеет некоторый эффект.

Я предлагаю вам создать конкретные изображения для каждой границы, которую вы хотите.

Answer 2

Как сказал ErickPetru, border-color игнорируется при использовании border-image.

Единственное решение, которое я мог бы предложить для вашего случая, - это использовать SVG в border-image, который закодирован в data: URI. Таким образом, вы можете манипулировать им через JS и применять результат. Или используйте элемент canvas для динамического создания растрового изображения и используйте его в качестве border-image.

Надеюсь, это поможет. :)