對齊背景圖像與動態文本

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並與補白/利潤率的/ etc玩。

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=""/>