移动图像

Question

我想向下移动一张图片。但是当我使用顶部或底部时，我不能将图像向右或向左移动。（我不知道怎么做，但我设法让它像 photoshop 中的图层蒙版一样！）我使用了 margin 、 padding 、 top 、 bottom 等，但其中 none 有效这是我的代码

.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

那是因为你用的是背景属性来定义图片，那你就得用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>

移动图像

Moving an image

html

css

move