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>

Here是JSFiddle，CSS和HTML。

我怎么能这样做？

指导将受到高度赞赏。

编辑：我要求图片是其自身的元素，background:url()它不是我正在寻找的。

编辑＃2 ：这是给出的解决方案之一，数字不一样，圆形左右两侧消失。

谢谢。

Answer 1

我可以提出两个选项，虽然一个涉及遗漏image - 元素，第二个使用jQuery ......（老实说，我认为它不可能做到使用image - 元素...抱歉。）

选项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相同，除了我和＃34;被骗＆＃34;保留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 + ')');

然后最后用CSS隐藏image - 标签：

#tvshape img {
    display: none;
}

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

Answer 2

我刚把这段代码包含在你的css中

#tvshape{ background:url('http://1.bp.blogspot.com/_Y1fFfKjiX2g/S_gMwLeGtjI/AAAAAAAALlE/vdX0ttHeEjg/s1600/CLOUDS2.jpg')center no-repeat; }

使用的图像是为了示例目的而随机拍摄的。这是你想要的版本吗？

JSFiddle：Link