CSS - изображение для фона цвет

Question

Я пытаюсь добиться эффекта, как показано ниже с помощью CSS. Синий круг представляет и изображение. Красный цвет - это просто цвет фона, но будет иметь другой текст в зависимости от изменений в DOM. Я почти уверен, что смогу понять, как это сделать, используя абсолютное позиционирование, но я бы очень хотел избежать этого, если это вообще возможно. Есть ли другой способ добиться этого с помощью CSS?

Я уверен, что это не поможет, что я не могу понять, как обращаться к нему должным образом в поисках, чтобы получить соответствующий ответ. Спасибо за любую помощь!

Answer 1

Fiddle: 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

Если вы хотите, чтобы текст как круг и фона, у вас есть два варианта:

A. floats
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> 

Просто как это!

Answer 3

Я бы сказал, что

• использовать псевдо-элемент для круга, а не реальный элемент (если возможно с вашей разметкой).
• использовать радиус границы 50% вместо определенного значения.
• используйте отрицательный запас, чтобы вытолкнуть круг наполовину из прямоугольника.

Вот Pen: http://codepen.io/davidtheclark/pen/anFmw