заполнение границ изображения и фона

Question

заполнение границ изображения и фона

0

У меня есть 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, являются непривлекательными, потому что этот слой позади...

Любые идеи:

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

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

Camille Blanc 08 март 2015, в 04:33

Источник

Теги:

php

css

z-index

2 ответа

Ещё вопросы

zeidanbm · Answer 1 · 2015-03-08T02-17-00.000Z

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

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

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

2) И эта рамка рамки изображения и z-индекс

Нет, с этим решением у меня есть цвет фона, который перекрывает углы моего изображения границы, и это именно то, чего я пытаюсь избежать!
извини не видел этого! проверьте ЭТО ОДИН, это может помочь вам. Я должен был заключить содержимое переключателя и текст в отдельный div, который не связан с div содержимого.

Ibrahim Badusha · Answer 2 · 2015-03-08T01-09-00.000Z

  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;
    }