Question

我有一个引用生成器，我只是想在动态文本后面放置一个背景图像。这样文本看起来就像在引号内。无论我做什么，我都无法正确对齐。我知道它在div中有不同的部分并调整css，但它不起作用。有没有不同的方法。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这是一种方法，它将父元素设置为背景图像的大小，然后使用绝对定位将引号置于图像中心。这将确保文本覆盖图像，并且背景图像永远不会被拉伸。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

这里有一个更自适应的方法，没有固定的宽度/高度，并使用填充来确保父的宽高比与背景图像成比例，并将背景图像拉伸到使用background-size: 100% 100%;的父级的大小。这样做更好，因为引用框可以是您想要的任何大小，但如果您将引用框拉伸超出图像大小，则会出现拉伸图像的缺点。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

我会将图像分开（正如我在这里所做的那样），使用FLEXBOX并使用填充/边距/等。

将背景图像与动态文本对齐

2 个答案: