如何在我的边框中获得图像

时间:2014-07-28 11:33:19

标签: css border

我有一个边框权限应用于此div。它目前在页面上运行一行,我想保留该行,但也实现了一个图像,以显示在页面右下方的右边界,这是我当前的css:

.aboutMenuArticle {
  position: fixed;
  cursor: pointer;
  z-index: 999;
  background-color: #ffffff;
  height: 100%;
  left: -27%;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out;
  -ms-transition: -ms-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  border-right: 1px solid #e5e5e5;
}

以下是我需要它的图像:

enter image description here

有谁知道我怎么能做到这一点?非常感谢

1 个答案:

答案 0 :(得分:0)

我做了一个快速的小提琴,你绝对定位一个后来,所以它坐在中间。右边的负值应该是图像宽度的一半。

http://jsfiddle.net/n28r5/

div {
background: #CCC;
height: 200px;
width: 200px;
border-right: 1px solid #CCC;
padding: 20px;
background-clip:content-box;
position: relative;
}

div:after {
    width: 20px;
    height: 48px;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: -10px;
    bottom: 0;
    margin: auto;
    background: url(http://red-rockfinancial.com/images/info.jpg);
}