CSS - 图像到背景颜色

我想用CSS实现如下效果。蓝色圆圈代表和图像。红色只是一种背景颜色，但根据DOM中的变化将会有不同的文字。我很确定我可以弄清楚如何使用绝对定位来做到这一点，但如果可能的话，我真的很想避免这种情况。有没有另外一种方法可以通过CSS来实现？CSS - 图像到背景颜色

icon transitions to background color

我敢肯定它没有帮助，我真的不能弄清楚如何引用它正确地在搜索中获得相应的答案。谢谢你的帮助！

来源

2014-01-19 tjfo

你应该用'位置准备的jsfiddle：absolute'解决方案，使可能的答案尝试更容易。 – MarcinJuraszek

小提琴：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; 
}

来源

2014-01-19 06:08:54 Doggo

我会说你钉了它。荣誉 – jboneca

谢谢！工作很棒！ – tjfo

如果你想在圆和文字背景，你有两种选择：

A.漂浮物
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>

就这么简单！

来源

2014-01-19 06:20:13 Schien

Schien第一个答案为我解决了它。我试图避免绝对定位的原因是我已经在一个绝对定位的元素中工作，我发现嵌套它们很快变得复杂。谢谢您的意见！ – tjfo

不客气。绝对定位的元素本身就是一个锚定容器;所有的孩子都以左上角为原点（0,0）。不确定这个解释是否会简化下一次类似任务的心理模型。 “>”选择器可能不适用于所有浏览器，所以如果兼容性问题，您知道您有选择。 – Schien

我想说

使用伪元素为圆形，而不是一个真正的元素（如果可能的话与你的标记）。
使用边界半径50％而不是确定的值。
使用负边距将圆圈推出矩形的一半。

这里有一个笔：http://codepen.io/davidtheclark/pen/anFmw

来源

2014-01-19 06:20:33 davidtheclark

嗨davidtheclark，我最终以您的答案开始，但遇到了问题，因为我需要稍微移动图像以与页面上的其他元素对齐。这非常有帮助，但其他答案最终成为我的最终解决方案。谢谢你的回答！ – tjfo

CSS - 图像到背景颜色

回答

相关问题