TV-Shaped CSS图分界图像

Question

我似乎无法想象如何完成以下任务.

我有这样的形状:

这是期望的结果:

但是,当我将溢出应用于子div时,会发生这种情况:

或者当溢出在父div中时

我已经尝试将CS​​S拆分为更多的div,然后尝试重叠它们,所有这些尝试都是失败的.

HTML和CSS如下

CSS:

#tvshape {
 position: relative;
 width: 200px;
 height: 150px;
 margin: 20px 10px;
 background: #0809fe;
 border-radius: 50% / 10%;
 color: white;
 text-align: center;
 text-indent: .1em;
}

#tvshape:before {
 content: "";
 position: absolute;
 top: 10%;
 bottom: 10%;
 right: -5%;
 left: -5%;
 background: inherit;
 border-radius: 5% / 50%;
}

#tvshape img {
 height:100%;
 width:100%;
}

HTML(没什么特别的):

<div id="tvshape">
    <img src="http://wallpaperpanda.com/wallpapers/pbc/RER/pbcRERyTy.jpg">
</div>

而这里是的jsfiddle和CSS和HTML.

我怎么能这样做？

指导将受到高度赞赏.

编辑:我要求图像是它自己的元素,background:url()它不是我想要的.

编辑#2:这是给出的解决方案之一,数字不一样,圆形左右两侧消失.

谢谢.

Answer 1

我可以提出两个选项,虽然一个涉及image遗漏-element,第二个使用jQuery ......(老实说,我不认为这可能与image-element ...抱歉.)

选项1)

由于图片网址必须在HTML代码中,因此请按以下方式调整代码:

<div id="tvshape" style="background-image: url(http://wallpaperpanda.com/wallpapers/pbc/RER/pbcRERyTy.jpg);"></div>

然后添加以下CSS:

#tvshape {
    background-position: center center;
}

这是一个小提琴:http://jsfiddle.net/Niffler/cqPR8/

选项2)

基本上与选项1相同,除了我通过保留HTML代码"欺骗",即

<div id="tvshape">
    <img src="http://wallpaperpanda.com/wallpapers/pbc/RER/pbcRERyTy.jpg" alt="" />
</div>

添加一些jQuery,使HTML最终看起来像选项1:

var tvbackground = $('#tvshape img').attr('src');
$('#tvshape').css('background-image', 'url(' + tvbackground + ')');

然后最后image用CSS 隐藏-tag:

#tvshape img {
    display: none;
}

这是另一个小提琴:http://jsfiddle.net/Niffler/4WFL5/