заполнение бордюра и цвета фона

У меня есть div, который использует изображение границы. Ширина границы составляет 33 пикселя, но изображение не заполняет общую ширину и имеет прозрачность.
Я хочу иметь цвет фона, который бы точно соответствовал моей границе.

Вот код, с которым я пришел:
http://jsfiddle.net/kvo8zyr7/1/

.content {
width: 500px;
height: 500px;
border: 33px solid;
border-image: image-url("interface/global/popup_border.png") 33 stretch;
margin: 0 auto;}

.sub-content {
position: relative;
left: -33px;
top: -33px;
width: 500px;
height: 500px;
border-left: 15px solid rgba(0,0,0,0);
border-top: 14px solid rgba(0,0,0,0);
border-right: 15px solid rgba(0,0,0,0);
border-bottom: 14px solid rgba(0,0,0,0);
background-color: #e4e2d7;
background-clip: padding-box;
z-index: -1;}

Проблема в том, что все элементы, которые есть в моем суб-контенте div, не доступны для клика, потому что слой находится позади …

Любые идеи, чтобы:

  • Сделайте элементы кликабельными
  • Иметь такой же визуальный результат с другим решением, чем у меня, которое не сделало бы элементы не щелкающими?

Заранее спасибо за помощь.

0

Решение

  Try this

.content {
width: 500px;
height: 500px;
border-width: 33px;
border-style: solid;
-webkit-border-image:url("http://i.imgur.com/SVFLQko.png") 30 30 round; /* Safari 3.1-5 */
-o-border-image:url("http://i.imgur.com/SVFLQko.png") 33 33 round; /* Opera 11-12.1 */
border-image:url("http://i.imgur.com/SVFLQko.png") 33 33 round;
margin: 0 auto;
}
0

Другие решения

В ответ на ваш комментарий я исправил jsfiddle и вот еще одно решение jsfiddle который работает лучше, просто переключая содержимое div внутри sub-content с корректировкой позиций и удалением z-index и после некоторого поиска по z-index кажется, что вложенный div у вас есть проблема, так как это будет невозможно.

Некоторые ссылки, чтобы понять это:

1) Пожалуйста, прочитайте это О z-index для ребенка и родителя

2) И это Граница рамки изображения и z-index

0

По вопросам рекламы [email protected]