Question

我想要像代码中的图像边框，我想在其中添加图像。我怎样才能做到这一点？

.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

<div class="circleBase type3">
  <img class="img-responsive" src="my-pic.jpg">
</div>

ml - ＆gt;

<div class="circleBase type3"></div>

Answer 1

您可以直接为图像本身添加边框。

这可以通过两种方式完成：

<img src="..." border="1" />

或

<img style='border:1px solid #000000' src="..." />

Answer 2

试试这个

<div class="circleBase type3">
  <img class="img-responsive" src="my-pic.jpg">
</div>

.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

将border.png替换为边框图像

如何添加图像以显示在边框后面

2 个答案: