Блог

Главная - Вопросы по программированию - Как получить полупрозрачное изображение границы, чтобы показать цвет границы за ним?

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

#png #transparent #border-color #css

#HTML #css #Цвет #png #прозрачный

Вопрос:

У меня есть div-оболочка с правой границей размером 20 пикселей. Я устанавливаю цвет границы, а затем изображение границы в полупрозрачном формате png.

Я сделал это, чтобы иметь возможность изменять цвет ниже с помощью JavaScript, сохраняя текстуру png. Но цвет границы «background» становится белым, как только я использую правило border-image, или исчезает вообще.

HTML — это просто:

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

И CSS:

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

Комментарии:

1. Чтобы упростить тестирование, не могли бы вы создать тестовый пример jsFiddle ? Вы можете загрузить свое elastic.png в http://imgur.com / .

Ответ №1:

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

Согласно W3C:

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

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

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

Ответ №2:

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

Или используйте элемент canvas для динамической генерации растрового изображения и используйте его в качестве изображения границы.