Question

我有一个website，无论屏幕大小/设备是什么，我都希望标题背景位于相同的位置。我希望线条的中心位于＆＃34;坚持＆＃34;到了h1中的点。

我走近了，但是我认为有一个错误是由于div的高度造成的，当我将浏览器调整到与iPhone 5相同的大小时，背景在一个稍微不同的地方，所以使用背景位置来保持中心位于点下方是不可能的。我想避免this，即线条交叉点的部分。

如果背景被浏览器边界剪切，我不在乎。我只是希望线条的中心始终保持在点下！我该如何实现这一目标？我无法发布服务器上的原始代码（我使用手写笔），但这里有我生成相同错误的内容：

＆＃13;

#header
	height: 344px
	max-width: 435px
	margin: 0 auto
	background: no-repeat url('/img/lines.png')
	background-position: -52px -2px
	background-size: 100%
	+below(435px)
		background-size: 320px
		background-position auto
	//haj.zso text
	h1
		text-align: center
		padding-top: 137px
		font-size: 65px
		font-weight: 700
		font-style: italic	
		letter-spacing: -3.7px
		margin: 0

＆＃13;

<div id="wrapper">
      <div id="header" class="animated zoomIn">
        <h1 class="animated fadeInDownBig">haj.zso</h1>
       
      </div>

＆＃13;

我只是在玩高度，最大宽度，背景位置，背景附件和背景大小的属性，没有运气......我觉得我没有采取正确的行动完全接近这一点。

我没有将其上传为图片，因为我不想稍后为这些线设置动画，并在悬停到文字时添加一个bg剪辑。

Answer 1

尝试用这个替换你的css

    #header {
    height: 344px;
    max-width: 485px;
    margin: 0 auto;
    background: url("/img/lines.png") no-repeat;
    background-position: center;
    background-size: cover;
    background-position-x: -57px;
}

@media only screen and (max-width: 400px){
#header {
    max-width: 320px;
    background-size: cover;
    background-position-x: -111px;
}
}

将背景图像粘贴在相对于跨设备的内容的相同位置

1 个答案: