выравнивание фонового изображения с динамическим текстом

Question

У меня есть генератор котировок, и я просто пытаюсь поместить фоновое изображение за динамический текст. Таким образом, текст выглядит так, как будто он находится внутри кавычек. Я не могу заставить это правильно выравниваться независимо от того, что я делаю. Я знаю, что это вопрос наличия разных частей в div и настройки css, но он не работает. Есть другой подход.

<style> 
 
#allTogether{ 
 
margin-top:60px; 
 
padding-left:-100px; 
 
width:400px; 
 

 

 
} 
 
#quote{ 
 
margin-top:-40px; 
 
width:380px; 
 
height:100px; 
 
font-size:18px; 
 
} 
 

 
#bunch{ 
 
margin-left:200px; 
 
} 
 
</style>

<div id="bunch"> 
 
<div id="allTogether"> 
 
<div id="quote" > 
 
<script type="text/javascript" src="https://www.brainyquote.com/link/quotebr.js"></script> 
 
</div> 
 
</bunch> 
 
<br> 
 

 
<img src="https://www.thesenaseproject.org/wp-content/uploads/2015/10/quotation_marks.png"/>

Answer 1

.allTogether { 
 
\t display: flex; 
 
\t height: 400px; 
 
\t width: 500px; 
 
} 
 
.allTogether div { 
 
\t align-self: auto; 
 
\t margin: auto; 
 
} 
 
.quote { 
 
\t padding-top: 40px; 
 
\t 
 
}

<div class="allTogether"> 
 
    <div><img src="http://seanrawles.work/scoopzilla/left_quote.png" /></div> 
 
    <div> 
 
<script type="text/javascript" src="https://www.brainyquote.com/link/quotebr.js"></script>  
 
    </div> 
 
    <div><img src="http://seanrawles.work/scoopzilla/right_quote.png" /></div> 
 
</div>

Я бы вырезать изображение друг от друга (как я сделал здесь), используйте FLEXBOX и играть с ПРОКЛАДКИ/полями/и т.д..

Answer 2

Вот один из способов сделать это настройки родительского элемента к размеру фонового изображения, а затем, используя абсолютное позиционирование по центру котировки над изображением. Это гарантирует, что текст накладывает изображение, а фоновое изображение никогда не растягивается.

#bunch { 
 
    width: 700px; 
 
    height: 197px; 
 
    background: url('https://www.thesenaseproject.org/wp-content/uploads/2015/10/quotation_marks.png') top center no-repeat; 
 
    position: relative; 
 
} 
 
#quote { 
 
    position: absolute; 
 
    left: 150px; 
 
    right: 150px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    text-align: center; 
 
}

<div id="bunch"> 
 
    <div id="quote" > 
 
    <script type="text/javascript" src="https://www.brainyquote.com/link/quotebr.js"></script> 
 
    </div> 
 
</div>

А вот более адаптивный способ сделать это без фиксированной ширины/высоты, и с помощью отступов, чтобы убедиться, что соотношение сторон родителя пропорционально фоновое изображение и растягивая фоновое изображение до размера родителя с использованием background-size: 100% 100%;. Это лучше, потому что поле котировки может быть любого размера, которым вы хотите, но при этом обратная сторона изображения выглядит растянутым, если вы растягиваете поле цитаты за пределами размера изображения.

#bunch { 
 
    height: 0; 
 
    padding-bottom: 28.14%; 
 
    background: url('https://www.thesenaseproject.org/wp-content/uploads/2015/10/quotation_marks.png') top center no-repeat; 
 
    background-size: 100% 100%; 
 
    position: relative; 
 
} 
 
#quote { 
 
    position: absolute; 
 
    left: 20%; 
 
    right: 20%; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    text-align: center; 
 
}

<div id="bunch"> 
 
<div id="allTogether"> 
 
<div id="quote" > 
 
<script type="text/javascript" src="https://www.brainyquote.com/link/quotebr.js"></script> 
 
</div> 
 
</bunch> 
 
<br> 
 

 
<img src=""/>