Javascript CSS/边框图像/边框图像切片/造成非常小的间隙,如分割线
我有以下代码:Javascript CSS/边框图像/边框图像切片/造成非常小的间隙,如分割线,javascript,html,css,Javascript,Html,Css,我有以下代码: <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>border-image slice issue</title> <style type="text/css"> .container { width
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>border-image slice issue</title>
<style type="text/css">
.container {
width: 600px;
height: 344px;
background-color: rgb(255, 245, 187);
}
.frame {
opacity: 1;
position: absolute;
display: block;
width: 800px;
height: 1000px;
background-image: url('https://i.ibb.co/wQSgvS7/jessica.jpg'), url('https://i.ibb.co/1ssy41c/mcol-papyrus-bg.png');
background-size: 500px 700px, auto;
background-position: center center;
background-repeat: no-repeat, repeat;
border-width: 0;
border-image: url('https://i.ibb.co/N22Y8qg/fra-basic-black-wood-bg.png') repeat;
border-image-slice: 100 fill;
border-image-width: 100px;
border-style: inset;
transform-origin: 0px 0px;
transform: matrix(0.344, 0, 0, 0.344, 162.4, 0); /* keep this line */
}
</style>
</head>
<body>
<div class="container">
<div class="frame"></div>
</div>
</body>
</html>
边界图像切片问题
.集装箱{
宽度:600px;
高度:344px;
背景色:rgb(255245187);
}
.框架{
不透明度:1;
位置:绝对位置;
显示:块;
宽度:800px;
高度:1000px;
背景图像:url('https://i.ibb.co/wQSgvS7/jessica.jpg'),网址('https://i.ibb.co/1ssy41c/mcol-papyrus-bg.png');
背景尺寸:500px 700px,自动;
背景位置:中心;
背景重复:不重复,重复;
边框宽度:0;
边框图像:url('https://i.ibb.co/N22Y8qg/fra-basic-black-wood-bg.png)重复;
边界图像切片:100次填充;
边框图像宽度:100px;
边框样式:插图;
变换原点:0px 0px;
变换:矩阵(0.344,0,0,0.344162.4,0);/*保持这一行*/
}
您可以在以下网站上找到:
这里有一个预览:
我的问题是在Chrome
上有一些小间隙,如下图所示:
镀铬:-不好(请注意角落上的小分隔线)
Firefox:-好的
以下是您的统计数据:
窗口:
- 铬:坏
- 火狐:好的
- 边缘:好的
- 铬:坏
- 狩猎:糟糕
Codesandbox.io
交给我,应用你的解决方案,并把它的链接粘贴到这里好吗
谢谢 一种方法是分割图像并添加更多背景层,这样可以获得更好的效果
.frame{
显示:块;
宽度:800px;
高度:1000px;
背景:
网址(https://i.ibb.co/wQSgvS7/jessica.jpg)中心/500px 700px无重复填充框,
网址(https://i.ibb.co/1ssy41c/mcol-papyrus-bg.png)填充框,
/*角落*/
网址(https://i.stack.imgur.com/TvoN2.png)左下角/100px 100px边框框不重复,
网址(https://i.stack.imgur.com/GzJik.png)左上角/100px 100px边框框不重复,
网址(https://i.stack.imgur.com/0r7ag.png)右上角/100px 100px边框框不重复,
网址(https://i.stack.imgur.com/3yWVf.png)右下角/100px 100px边框框不重复,
/*边界*/
网址(https://i.stack.imgur.com/Mhf03.png)底部/100px 100px边框框重复-x,
网址(https://i.stack.imgur.com/h51w6.png)左/100px 100px边框框重复-y,
网址(https://i.stack.imgur.com/Jt4uz.png)顶部/100px 100px边框框重复-x,
网址(https://i.stack.imgur.com/sp0wZ.png)右/100px 100px边框框重复-y;
边框:100px实心透明;
变换原点:0px 0px;
变换:矩阵(0.344,0,0,0.344162.4,0);/*保持这一行*/
}
正文{
背景:粉红色;
}
添加供应商前缀是否有帮助(即-webkit border image
,-moz border image
,等等)?没有,没有帮助。您是否打开将图像分割成8个小图像,并且能够避免此问题?不幸的是,这不是我的选项。我被迫使用现有的图像作为边界我被迫:你是说想要这个的人不想让你找到解决方案?我不认为边界图像和亚像素渲染有一个简单的解决方案谢谢Temani的关注,但不幸的是这不是我的选择。我无法将初始图像分割为多个图像ones@davidesp实际上,这是我看到的唯一解决方案,顺便问一下,转换的目的是什么?您不能使用不同的值并调整宽度/高度吗?更改这些值可能是另一种适合我的方法,但我仍然需要使用原始边框图像,因为帧的大小是可变的。在这里,我创建了另一个关于这种方法的线程:你能看一下吗?