关于css背景图,只重复中间的,而顶部和底部不会被重复。

sai2333
  • 45

在一个贴图中,图片描述

想实现的效果,顶部的,线条和图案还有底部的线条和图案不重复,只重复中间左右的。请问可以做到吗?谢谢各位的解答

回复
阅读 1.6k
3 个回答

可以,用 border-image
https://aotu.io/notes/2016/11...

我构造了这个引号图:

clipboard.png

宽高是 63 * 79

<style type="text/css" media="screen">
.quote {
    margin: 0 auto;
    width: fit-content;
    border: 27px solid rgba(242,181,78,.3);
    /* 这个图片是 63 * 79 大小的 */
    border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAABPCAYAAABcfR0eAAAABGdBTUEAALGPC/xhBQAAA5tJREFUeAHtWruKFUEQvesD3yKs7wcuJgpiYKCBorvughiYqYGvj9DADxAjA2FDzXY1ETMDQVAvgokGvhU10EUFAwVFxccqah3YhuJs0TWRt/ZSDUNXddeZW+d0z9ye6Wm1sqQCqUAqkAqkAqlAKpAKpAJdo0BPAyYrJWZpJe659H2n/j7xF1Gbdh+I81c3RLVvTSSKZPn4LW0LKfFp4r8xYgv2NcWHdddVSIDMbSPzIQczYmA60oRRqpXDtU7pu2H0HzXadFNbO5FtXM9lulr1bkp+rvifHcxawoR0tzokxqUfZHU5JI4lUml7qYM7bdemvTd9cb1/IwIepk3xId2ZktV7OcqIWfVJyny5+Lj7W7Gl7QhhQrp7HRIgM0CZH2uAWUWYkO5FhwgWNbMo87sO5gXFh3SxaAG5MlWt+jplvtGJxznOEqbjrnXD2y9ZzXYya1O/d6NDOGPoFDFcJImRqh3bVKoQsLacLedZpjAhzTWS1R85SsJW/VX68W9QyqAYVpxue1KCI9U87bGc9Z708KDzS5Homin/WEjpEbPsE4r4HLG95SzOsU9hQpqbJSuLLLdtUdkfbIDBZbRYYUKaZxoQ+SQx01X2Vxpg8OIiZNHX9ybJcIGTJW52D1UMHn5mKN8yP0jjlFjgWMlnWyqQCqQCqUAqkAqkAqlAKpAKpAKpQCqQCsRSQL/MiJRZrySDN8leeSYBPyaCsBW2xAHglRxexqAOW4YlM353yP5HidFbZlcbYO6FZawSK6PDhLV/TsVjHwGv2HS/ZR9XmJAmpq63cQJiO1T228W2yOo2bJ+vUJgWb1rovk7Z/fLD3r1oTGKweVLKrmJU6mvS9073RyTfhMgFIYFRLaUJ5nwJjlw/leT0dLXs9YoAbnrelvoXiZmnMCFNfNpikdVt/O1ffwPMiMU22rQfsJKkNp6+XTPl8fWGHmW2x6Wf9/1uOpi30h9tkCWlyQXbWkxY+5cJgl3inw7mNGFCuqsdEhDhAGU+1ACDPcjwBd/o6VFmGzvE/K3QKQdzv8Y60rUwWEtU+i7JUR5iSqiH4ZtjwYWrX0lGPNra30kZzxcfn8foGG1PWs4SPozbVyEBQmNy9Mihyx5xNFm28ZRXLVGmvfdfzctZkPIwU2bKjwoZHjntbzCG8E4Fg8dbdznLU8n4jf/SVPskBtcuiHKpfRKDtfwjBqSfCqQCqUAqkAqkAqlAKpAKpAKpQCrQTQr8A3jA2eUT9F4kAAAAAElFTkSuQmCC);
    /* 四条切割线,上右下左 */
    border-image-slice: 40 31 40 31 fill;
    border-image-repeat: stretch stretch;
}
</style>

<div class="quote">谁说不可以</div>
<hr>
<div class="quote">明明就可以而且还自适应呢</div>
<hr>
<div class="quote">记得点赞</div>

clipboard.png

一张图做不到。建议分顶部 中间 底部三个部分切图

hannah
  • 2
新手上路,请多包涵

HTML:
<div class="box">文本。。。。。</div>

CSS思路:
.box: 设置边框线; 相对定位;
.box:before,.box:after: 利用伪元素, 设置这俩伪元素绝对定位。 一个伪元素,引用顶部的引号图标;一个伪元素,引用 底部的引号图标。分别设置定位样式。

优点: 代码精简实现;
缺点: 适用于底色为纯色场景, 不然引号周边遮盖不住边框线。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏