Html CSS中的图像调整

需要一些关于css的帮助来获取图像

这是HTML

    <div class="main">
    <div class="loginform">
        <h1 align="left">'Welcome to .'</h1>   
        <p align="left">'Supporting our customers by providing documentation for all products across the Suite.'</p>
    </div>      

    <div class ="background"></div>
    </div>        

我的图像看起来像这样： [！[在此处输入图像描述][1][1]

我很想这样。绿色图像在密码框中不应可见。 [！[在此处输入图像描述][2][2]

---

再次感谢您的帮助。

简短回答，图片必须是loginform的背景图像

---

您也可以通过将图像相对定位到

main

div来实现这一点。 在这种情况下，您应该使用z-index。见示例：

我创建了自己的HTML代码。您应该将这些CSS设置应用于您自己的代码

<div class="main">
<h1>
Welcome To
</h1>
<p>
Supporting our customers
</p>

<form>    
  <div class="left">
    Username<br/><input type="text" name="username">
  </div>
  <div class="right">
    Password <br/><input type="text" name="password">
  </div>  
  <div class="clear"></div>
</form>
<div class="background"></div>

</div>

检查此示例代码

测试CSS

.main {
    widht: 400px;
    height: 100px;
  }

  .input_fields{margin-top: 100px;}
  .background {
    background-image: url("https://www.accenture.com/t20160121T034706__w__/us-en/_acnmedia/Accenture/Conversion-Assets/DotCom/Images/Global/Technology_19/Accenture-T1-Green-Forward-Mark-icon.png?la=en&h=270&w=320");
    background-repeat: no-repeat;
    background-position: right;    
    opacity: 0.6;
    filter: alpha(opacity=60);
    height: 300px;
    width: 300px;
    z-index: -1;
    float: right;
    margin-top: -15px;
    right: 0;
    position: absolute;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }
input{width: 90%;}

测试HTML

<div class="main">
  <div class="loginform">
    <h1 align="left">'Welcome to ALIP Documentation Center.'</h1>
    <p align="left">'Supporting our customers by providing documentation for all products across the Suite.'</p>

    <div class="background"></div>
    <div class="input_fields">
      Username
      <br/>
      <input type="text" name="username">
    </div>
    <div>
      Password
      <br/>
      <input type="text" name="password">
    </div>
  </div>  
</div>

“欢迎来到ALIP文档中心。”
“通过提供套件中所有产品的文档来支持我们的客户。”
用户名


密码

谢谢您的回复。我没有得到确切的结果。让我来看看这些值并检查一下。嗨，艾瓦拉斯，你能检查一下我在上面附上的第三张图片吗？就像@Anubhav说的，如果我们能看到你的完整CSSHi艾瓦拉斯，这将非常有帮助，完整的css在上面提到过。再次感谢您寻找并帮助他们解决此问题。它是以（.main）开头的。看看这把小提琴，它应该会把事情弄清楚的。请给出你的答案css@PankajMorajkar我真的没有得到你想要的。您只想将图像放在密码框后面，对吗？嗨，Rotan…感谢您帮助我解决这个问题…是的，我希望它放在密码框后面，如图2所示。我尝试了很多选择，但仍然没有得到它…嗨，罗坦。。。我用最新的css修改了这个问题。你能检查一下吗？再次感谢您的帮助。@PankajMorajkar您可以粘贴一个链接到您的网站吗？因为我无法修复任何问题，如果我不能模拟您的设计设置。尝试创建一个新的代码。这将使生活更容易；）嗨，Aldrien…当我尝试你的代码时，图像完全隐藏在盒子后面。看来你的代码是正确的。我正在尝试此操作的站点具有带有用户名和密码框的容器。我想我必须以容器为目标。我应该以什么为目标…例如，如果容器是“mt内容容器”，我可以使用什么css来实现我的目标？抱歉，我不确定这是否是正确的问题，但只是寻求指导。我想你需要将“输入字段”类更改为“mt内容容器”，并修改“页边空白顶部”正确结果的值。

.main {
  width: 400px;
  height: 1000px;
  background-color:#fff;
}
form{
  cleaR:both;  
  position:relative; /* To set the Form above the bg image */
  z-index:3; /* To set the Form above the bg image */
  background-color:yellow;
}
.left, .right{
  width:48%;
  margin-left:1%;
  margin-right:1%;  
  float:left;  
  position:relative;
  z-index:0;
}
.left input, .right input{
   width:100%;
}
.background{
  background-image:url("http://www.iconsdb.com/icons/preview/white/arrow-25-xxl.png");
  background-repeat: no-repeat;
  background-position:right;    
  height:200px;
  width:200px;
  position:relative; /* To set the bg behinde the form */
  z-index:1; /* To set the bg behinde the form */
  top:-120px; /* Set the position of the BG image */
  left:79%; /* Set the position of the BG image */
  background-color:green;
}
.clear{clear:both;}

.main {
    widht: 400px;
    height: 100px;
  }

  .input_fields{margin-top: 100px;}
  .background {
    background-image: url("https://www.accenture.com/t20160121T034706__w__/us-en/_acnmedia/Accenture/Conversion-Assets/DotCom/Images/Global/Technology_19/Accenture-T1-Green-Forward-Mark-icon.png?la=en&h=270&w=320");
    background-repeat: no-repeat;
    background-position: right;    
    opacity: 0.6;
    filter: alpha(opacity=60);
    height: 300px;
    width: 300px;
    z-index: -1;
    float: right;
    margin-top: -15px;
    right: 0;
    position: absolute;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }
input{width: 90%;}

<div class="main">
  <div class="loginform">
    <h1 align="left">'Welcome to ALIP Documentation Center.'</h1>
    <p align="left">'Supporting our customers by providing documentation for all products across the Suite.'</p>

    <div class="background"></div>
    <div class="input_fields">
      Username
      <br/>
      <input type="text" name="username">
    </div>
    <div>
      Password
      <br/>
      <input type="text" name="password">
    </div>
  </div>  
</div>