首页 文章

移动图像

提问于
浏览 次
1

我想向下移动一个图像 . 但是当我使用顶部或底部时，我无法向右或向左移动图像 . （我不知道如何，但我设法使它像在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>
html css move

1 回答

  • 1

    's because you are using the background property to define the image, then you'将不得不使用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>
    回复于

相关问题