移动图像

Question

我想向下移动图片。但是当我使用顶部或底部时，我无法向右或向左移动图像。 （我不知道如何，但我设法使它像在Photoshop中的图层蒙版！） 我使用了边距，填充，顶部，底部等，但没有一个工作 这是我的代码

.header {
    
    height: 200px;
    background: #313b3d url(https://preview.ibb.co/mFmpK5/grotti_canyon_wallpaper_1366x768.jpg)no-repeat 160px top;		
}

.head-right a {
    color: #fff;
}

.head-right a:hover {
    color: #fff;
}

.head-right h1 {
    position: relative;
    margin-bottom: 17px;
    padding-top: 40px;
    font-size: 28px;
    text-align: center;
    background: url() no-repeat center top;
	
}

<div class="header">
	<div class="head-wrp">
		<div class="head-right">
			<h1><a href="(*link*)">(*title*)</a></h1>
			<h2>(*short_description*)</h2>
		</div>
		<div class="head-left">
			<box:menu>
				<ul>
					<view:menu>
						<li class="(*menu_item_selected*)">
							<a href="(*menu_item_link*)">(*menu_item_title*)</a>
						</li>
					</view:menu>
				</ul>
			</box:menu>
		</div>
	</div>
</div>

Answer 1

那是因为您使用background属性来定义图像，那么您将不得不使用css background-position

.header {
    
    height: 200px;
    background: #313b3d url(https://preview.ibb.co/mFmpK5/grotti_canyon_wallpaper_1366x768.jpg)no-repeat;	
    background-position: 0 50px;
}

.head-right a {
    color: #fff;
}

.head-right a:hover {
    color: #fff;
}

.head-right h1 {
    position: relative;
    margin-bottom: 17px;
    padding-top: 40px;
    font-size: 28px;
    text-align: center;
    background: url() no-repeat center top;
	
}

<div class="header">
	<div class="head-wrp">
		<div class="head-right">
			<h1><a >(*title*)</a></h1>
			<h2>(*short_description*)</h2>
		</div>
		<div class="head-left">
			<box:menu>
				<ul>
					<view:menu>
						<li class="(*menu_item_selected*)">
							<a >(*menu_item_title*)</a>
						</li>
					</view:menu>
				</ul>
			</box:menu>
		</div>
	</div>
</div>