使用CSS将图像放在底部边框的中心

Question

一切都在这篇文章的标题中解释.我正在尝试将PNG图像放在div元素的中心底部边框中.

.content_block {
  border: ridge;
  border-width: 1px;
  border-color: #969696;
  height: 200px;
  width: 200px;
}
.content_block.orange {
  background-image: linear-gradient(#FBB03B, #FF9933);
}

<div class="content_block orange"></div>

这是我想要做的事情的图像:

我在网上寻找一种方法,用CSS,边框图像和东西,但没有任何效果.

Answer 1

要实现它正好位于边框中间的效果,您必须通过继承它来包含图像的边框,并使其不可见.像这样,你可以用它"计算".

看到这个小提琴的效果.在这个小提琴中,我创建了一个伪元素,它具有播放按钮的背景图像.

实现这一诀窍的CSS是:

div::after{
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 30px;
    height: 30px;
    background-image: url('http://www.iconsdb.com/icons/preview/gray/video-play-3-xxl.png');
    background-size: cover;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    border-top: inherit;
    border-top-color: transparent;
}

我把它放在绝对底部,左边50%.然后使用该transform属性,我将其移动到这些点的中心(左边50%,顶部100%);

然后为了使它与边界一起移动,我只在顶部继承,并使其不可见.