有没有一种方法可以确保在CSS或SVG中100％忠实地复制边框图像? [英] Is there a method to ensure 100% faithful reproduction of a border-image in CSS or SVG?

问题描述

这里是我的演示:

这是我的代码:

  .container {背景颜色:#444；宽度:300像素；高度:350像素；填充:20;边距:0;显示:flex;align-items:居中;证明内容:中心；边框:实心；border-width:15px 30px 30px 25px;border-image:url(https://i.imgur.com/Z6TVgss.png)40拉伸；溢出:隐藏box-sizing:content-box;背景:url(https://www.ecopetit.cat/wpic/mpic/6-67359_race-car.jpg)中心/覆盖无重复内容框；}div.element {宽度:50像素；高度:50px；mask-image:url(https://i.imgur.com/Z6TVgss.png);};div.icon-image {面罩尺寸:100％100％;遮罩位置:0％0％;遮罩重复:不重复；显示:flex;/*边框:1px纯橙色；*/flex-direction:列;align-items:居中;证明内容:中心；}div.icon-image img {宽度:100％;}  

 < div class ="container">< div title =" class ="icon-image元素"></div></div>  

有没有办法仅使用CSS或SVG中的编程功能-百分比，填充属性和全部内容来复制原始边框的图像?

---

感谢Termani Afif提供的解决方案. 我很惊讶地发现，Termani Afif的anwser，所以我想我的边界图像和蒙版可能不是这样说的.因此，我重新组合了其他图像，并且效果很好，在此演示中:codepen.io/joondoe/pen/GRJmBQK?editors=0100

解决方案

这是一个带有蒙版的想法.诀窍是要拥有两个图像.您的初始图像将包含边框和图像 ¹ ，如下所示:

上面的图像将用于遮盖该区域，伪元素和其他图像将位于顶部以创建边框:

  .box {宽度:500像素；高度:300像素；背景:url(https://www.ecopetit.cat/wpic/mpic/6-67359_race-car.jpg)中心/封面；-webkit-mask:url(https://i.ibb.co/D1X8D2J/ZHD6p.png)中心/不重复mask:URL(https://i.ibb.co/D1X8D2J/ZHD6p.png)中心/不重复位置:相对；}.box:之前{内容:"";位置:绝对；顶:0;左:0;对:0;底部:0;背景:url(https://i.stack.imgur.com/ZHD6p.png)中心/包含不重复；}身体 {背景:粉红色；}  

 < div class ="box"></div>  

¹ 我没有关注图像质量.这是对初始图像的快速编辑，以使内部区域不透明.这个想法是要有边框图像(内部透明)和填充图像(内部不透明)

Here my demo: https://codepen.io/joondoe/pen/MWwmGwG?editors=0100

In my example I am using CSS but I am open to solutions using SVG also.

I have managed to create a border-image with filling content inside. Now I am wondering if it is possible to create a 100% smooth border-image? I mean by that, a border image that automatically reproduce the original border image or nearest possible in a programmatic fashion.

In my demo you can see it is pretty OK but there still some aliasing and lags relative to the original border image. Here the original border image:

Here my code:

.container {
  background-color: #444;
  width: 300px;
  height: 350px;
  padding: 20;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid ;
  border-width:15px 30px 30px 25px;
  border-image:url( https://i.imgur.com/Z6TVgss.png)40 stretch;
 overflow:hidden;
 box-sizing:content-box; background:url(https://www.ecopetit.cat/wpic/mpic/6-67359_race-car.jpg) center/cover no-repeat content-box;
  
}

div.element {
  width: 50px;
  height: 50px; 
  mask-image: url( https://i.imgur.com/Z6TVgss.png);
  
};

div.icon-image {
  mask-size: 100% 100%;
  mask-position: 0% 0%;
  mask-repeat: no-repeat;
  display: flex;
  /* border: 1px solid orange; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
 
}

div.icon-image img {
  width: 100%; 
}

<div class="container">
  <div title="" class="icon-image element"></div>
</div>

Is there way to reproduce the original border's image using only programmatic feature in CSS or SVG -percentage, filling property and all?

---

edit: thanks to Termani Afif for this solution. I was surprised that there was a pixel's gap on the image in the Termani Afif's anwser, so I have assumed maybe my border-image and mask wasn't aliase'free to say it like that. So I have recomposed with other image, and it works very well, here the demo: codepen.io/joondoe/pen/GRJmBQK?editors=0100

解决方案

Here is an idea with mask. The trick is to have two images. Your initial image that will contain the border and an image¹ like below:

The above image will be used to mask the area and a pseudo element with the other image will be on the top to create the border:

.box {
  width:500px;
  height:300px;
  background:url(https://www.ecopetit.cat/wpic/mpic/6-67359_race-car.jpg) center/cover;
  -webkit-mask:url(https://i.ibb.co/D1X8D2J/ZHD6p.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/D1X8D2J/ZHD6p.png) center/contain no-repeat;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url(https://i.stack.imgur.com/ZHD6p.png) center/contain no-repeat;
}


body {
  background:pink;
}

<div class="box"></div>

¹ I didn't focus on the image quality. It was a fast edit to the initial image to make the inside area non-transparent. The idea is to have the border image (transparent inside) and a filled image (non-transparent inside)

这篇关于有没有一种方法可以确保在CSS或SVG中100％忠实地复制边框图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！