Изображение границы CSS только сверху и снизу

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

Вот граница изображения:

Вот что в настоящее время выглядит мой контейнер, как:

Соответствующие HTML:

<div class="panel-blurb"> 
      <p class="panel-blurb-text">  
       Ad molestiae hendrerit mei, 
       nobis persius deleniti et eum, ea ullum electram dignissim 
       his. Dicit dolorem moderatius in pro, dicat choro propriae ad mei. 
       Dicat legimus efficiendi sit in. Natum falli cu nec. Id hinc regione 
       alienum vel, cu vide atomorum mel. Munere commodo at eos, te laudem docendi 
       volumus pro, maiorum dignissim ex sea. 
      </p> 
      <div class="panel-link-wrapper"> 
       <a class="panel-link" href="#">VIEW DETAILS</a> 
      </div> 
     </div>

Соответствующий CSS:

.panel-blurb{ 
    width: 88.5%; 
    background-color: #54504f; 
    padding: 25px; 
    border-width: 15px; 
    border-style: solid; 
    border-image: url(images/border-min.png) 30; 
}

источник

2016-08-08 Jordan Carter

Вы пытались установить значение среза «border-image» равным проценту, например '30 %', а не просто' 30'? Не зная, каков ваш исходный пограничный образ, несколько сложно определить, что может вызвать проблему. – Santi

@TylerRoper Я добавил изображение. Добавление процентного значения добавляет границу со всех сторон, но полностью искажается. –

@TylerRoper, который может быть безраздельным (но я согласен с тем, что было бы очень полезно узнать, как выглядит исходное изображение) – henry

Без границ образа

div { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: #545050; 
 
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAIAAAC0D9CtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTCtCgrAAAABf0lEQVQ4T12SB3LDMAwE+USLYgFYZOv/n8iCkBUlMxgV4A71wjnbkCwp1j22mo8un6G9pFbS1Mr30SrfmvfB72xYOI/OazbpNQOdUs5hAYx0ny5wZqtvcuE5OmYcp+GdWkbNln6FKfIGjQ29CVjwBizloh1arWAtQwoVLL1FuwFGA4wF2SOgq7QFFK9mmweOp7OaXckiacdCer3ytl0Ib2A0q9C8gk9lBJa0wC/jYCUuWhfPeps33EuucQPt4IuD4WVvLOrJYXpykfGGYQ/OvrE06+fBsfG+Xd12cWqKEJjhX2/80hshaH96swqSrSuf2G4vLojLA00WjR3A4YvqbOYb1kMLSmEM9/sy4VONw4APlD4f+abkhrTEbkpulPG7zMkNTEq/2iEGiNX5oXzLpiZoj+OiiaVR6kppNSEIlxIrNo3xtMpl+Ys3iQViuNgbjSIZOOAYppU8xBRNcV2S6WISe3cNaieLiT1uLDA2lJYTasLqvks2NDfll6fpMKcfxz4t98bmcAYAAAAASUVORK5CYII='), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAIAAAC0D9CtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTCtCgrAAAABf0lEQVQ4T12SB3LDMAwE+USLYgFYZOv/n8iCkBUlMxgV4A71wjnbkCwp1j22mo8un6G9pFbS1Mr30SrfmvfB72xYOI/OazbpNQOdUs5hAYx0ny5wZqtvcuE5OmYcp+GdWkbNln6FKfIGjQ29CVjwBizloh1arWAtQwoVLL1FuwFGA4wF2SOgq7QFFK9mmweOp7OaXckiacdCer3ytl0Ib2A0q9C8gk9lBJa0wC/jYCUuWhfPeps33EuucQPt4IuD4WVvLOrJYXpykfGGYQ/OvrE06+fBsfG+Xd12cWqKEJjhX2/80hshaH96swqSrSuf2G4vLojLA00WjR3A4YvqbOYb1kMLSmEM9/sy4VONw4APlD4f+abkhrTEbkpulPG7zMkNTEq/2iEGiNX5oXzLpiZoj+OiiaVR6kppNSEIlxIrNo3xtMpl+Ys3iQViuNgbjSIZOOAYppU8xBRNcV2S6WISe3cNaieLiT1uLDA2lJYTasLqvks2NDfll6fpMKcfxz4t98bmcAYAAAAASUVORK5CYII='), 
 
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAIAAAC0D9CtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTCtCgrAAAABeklEQVQ4T12TDbLDIAiEPWLjP6hJev9LvA9N89LO0BlFll021EmOR5f33oij1RJ8fL1+ogY/pKya91CXvW8lnQvWZdRcwvYEpG27C86hvSYXt1eJvtfMnR5nE7JkFiD7TRHSqj0NHVpr9BMTvJa4z4cJq70k2MoE7FqoJkBCSLHjJylyoT3VC3aowRqAVhc/gCGZjJbkNEXmI7gPg8nF1uVqwRhddil0YVq6GIYeltWiKeySLz/u6GodAWBdt14OW2xKuponWYBpfWLoNcWbSQRyFibdGBsaSQ8Ms5HkiTM1nPEg9FpgRCE2oPhH25Jt7pHHbimupjC0LFuIpweL/Dq3egCbk7sa4bH2XcyTVWQtpk4O/y0mG8HubBIDtnCxZ8Rc39Tz1PJ0H5GjQYsimwcPoDJVa6P63J3PprIKtlZTMBKgxVjjaXzKKYBYDGm7F9Q2y2B9SqAAD/DeRE+L+DKsffps9B1TyPVfALb24FLMSEbyDYDqCzP0D2XlLfeYeYFOAAAAAElFTkSuQmCC' 
 
), 
 
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAIAAAC0D9CtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTCtCgrAAAABeklEQVQ4T12TDbLDIAiEPWLjP6hJev9LvA9N89LO0BlFll021EmOR5f33oij1RJ8fL1+ogY/pKya91CXvW8lnQvWZdRcwvYEpG27C86hvSYXt1eJvtfMnR5nE7JkFiD7TRHSqj0NHVpr9BMTvJa4z4cJq70k2MoE7FqoJkBCSLHjJylyoT3VC3aowRqAVhc/gCGZjJbkNEXmI7gPg8nF1uVqwRhddil0YVq6GIYeltWiKeySLz/u6GodAWBdt14OW2xKuponWYBpfWLoNcWbSQRyFibdGBsaSQ8Ms5HkiTM1nPEg9FpgRCE2oPhH25Jt7pHHbimupjC0LFuIpweL/Dq3egCbk7sa4bH2XcyTVWQtpk4O/y0mG8HubBIDtnCxZ8Rc39Tz1PJ0H5GjQYsimwcPoDJVa6P63J3PprIKtlZTMBKgxVjjaXzKKYBYDGm7F9Q2y2B9SqAAD/DeRE+L+DKsffps9B1TyPVfALb24FLMSEbyDYDqCzP0D2XlLfeYeYFOAAAAAElFTkSuQmCC' 
 
); 
 
    background-position: top center, bottom center, center left, center right; 
 
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; 
 
}

<div></div>

источник

2016-08-08 19:41:37

Это не решит проблему – henry

И я думаю, что вы имели в виду 'background-repeat: repeat-x, repeat-y;'? – henry

@henry sry see this again –

Вы забыли добавить круглый

Вы можете сделать это, как этот

.panel-blurb{ 
    width: 88.5%; 
    background-color: #54504f; 
    padding: 25px; 
    border-width: 15px; 
    border-style: solid; 
    border-image: url(images/border-min.png) 30 round; 
}

источник

2016-08-08 19:33:52

Пробовал это. Эта проблема: ( –

Попробуйте это. Он даст границу по всем сторонам.

border-image:url('images/border-min.png') 30 30 round;

источник

2016-08-08 21:02:17

Извините, это не сработало –

Изображение границы CSS только сверху и снизу

ответ

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