2016-09-05 2 views
-1

Я просто немного играю с целевой страницей.width on element и z-index

Я просто установил красный фон с непрозрачностью на «ЧАСОВОЙ ЧАСТИ ТЕКСТА».

  • Как установить ширину на этом правильном пути, поэтому у меня также есть отзывчивая деталь?
  • Как я могу получить шрифт спереди, а красный фон в спину?

#cathyText { 
 
     background-color: red; 
 
     padding: 10px; 
 
     opacity: 0.1; 
 
    }
 <h2 class="text-center" id="cathyText">A CATCHY PIECE OF TEXT</h2>

+0

Пожалуйста, включите требуемый код в ваш вопрос ! – baao

+0

Ваш комментарий не имеет смысла, соответствующий код и ссылка на сайт есть. – McDuck4

+0

Да, да. Посмотрите справочный центр (правила) на этом сайте. Код, размещенный на разных веб-сайтах, не разрешен – baao

ответ

1

Как я могу получить шрифт перед и красном фоне в спине?

Использование rgba():

#cathyText { 
    padding: 10px; 
    background: rgba(255,0,0,0.3); 
    z-index: 1; 
} 

Причины это работает первые 3 номера установлены красным-зеленый-синие цветов, а последние устанавливает непрозрачность.

Если вы хотите центрирование <h2> элемента, один из способов, чтобы поместить его в обертке и изменить отображение на inline-block:

#cathyText { 
 
    background-color: red; 
 
    padding: 10px; 
 
    background: rgba(255,0,0,0.3); 
 
    width:200px; 
 
    display:inline-block; 
 
} 
 

 
.catchy-text-wrapper { 
 
    width:100%; 
 
    text-align:center; 
 
}
<div class="catchy-text-wrapper"> 
 
<h2 class="text-center" id="cathyText">A CATCY PEICE OF TEXT</h2> 
 
</div>

+0

Большое спасибо за ваш ответ, я просто думал о ширину og на красном фоне.Я на самом деле думал, что это должно было быть выполнено? Ширина фона должна быть всего около 200px.Но если я дам ему ширину в% или пиксель, он будет выровнен по левому краю. – McDuck4

+0

Дал Пример в редакции. –

+0

Хорошо, я так и думал, что мне пришлось обернуть его. Отлично, большое вам спасибо. – McDuck4

1

использование rgba() для цвета фона

#cathyText { 
    background-color: rgba(255,0,0,.1); 
    padding: 10px; 
    /* opacity: 0.1; */ 
    z-index: auto; 
}