CSS - 图像到背景颜色

Question

我正在尝试使用CSS实现类似下面的效果。蓝色圆圈代表和图像。红色只是一种背景颜色，但根据DOM的变化会有不同的文本。我很确定我可以弄清楚如何使用绝对定位来做到这一点，但我真的希望尽可能避免这种情况。有没有其他方法可以通过CSS实现这一目标？

我确信无法在搜索中找出如何正确引用它以获得相关答案。谢谢你的帮助！

Answer 1

小提琴：http://jsfiddle.net/cdmW3/2/

我在这个例子中没有使用position:absolute。您可以删除不必要的CSS前缀（-moz，-webkit）

HTML：

<div class="wow">
    <div>Hello</div>
    <span>World</span>
</div>

CSS：

.wow {
    width: 400px;
    background-color: #D01528;
    height: 100px;
    -webkit-border-radius: 200px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius: 200px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 20px;
    border-radius: 200px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.wow > div {
    border: 1px solid #384B86;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 35px 0;
    text-align: center;
    height: 100%;
    width: 100px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
    background-color: #FFFFFF;
}

Answer 2

我会说

• 对圆圈使用伪元素，而不是使用真实元素（如果可能，使用标记）。
• 使用border-radius 50％而不是确定值。
• 使用负边距将圆圈推出矩形。

这是一支笔：http://codepen.io/davidtheclark/pen/anFmw

Answer 3

如果您想在圆圈和背景中同时包含文字，您有两种选择：

一个。漂浮
B.绝对定位。

绝对的立场并不是那么糟糕。我将使用内联样式来说明：

<div style="position:relative;">
  <div style="position:absolute;top:0;left:0;">Circle Text</div>
  <div style="position:absolute;top:0;left:100px;">Text</div>
</div>

但是如果您只需要右侧的文字，并且圆圈只是一个图像，那么您可以使用透明的PNG / GIF，并使用第一个属性来指定默认的背景颜色：

<div style="background: red url(circle-image.gif) no-repeat 0 0;padding-left:100px;">
Text
</div>

这很简单！