如何在没有 div 覆盖的情况下制作具有重叠 svg 边框的图像（类似框架）

Question

I am looking for an effect like this:

Currently I have the problem that the border is every time behind the image.

I use following code:

.imgStyleBorder{
  border: 0.5rem solid white;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
  border-image-source: url(rand3.svg);
  border-image-width: 0.5rem;
  border-image-slice: 8%;
}

The HTML looks like:

<div class="imgStyleBorder">
    <a data-id="130" class="" href="https://www.sir-barkalot.de/burg-neu-windeck/">
        <img src="https://www.sir-barkalot.de/wp-content/uploads/2022/08/IMG_1820-scaled.jpg" class="rt-img-responsive " alt="" width="2560" height="1707">
    </a>
</div>

To see the behavior in real live you can look to the Sample Page .

Is it possible too lay the border overlapping over the image without an extra div?

Answer 1

You need to upload landscape pattern for landscape image and use background image instead of border-image.