Question

为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>

这是最新的css

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

    .background
    {
     background-   
     image:url("icon.png?la=en&h=270&w=320");
     background-repeat: no-repeat;
     background-position:right;  
     position:relative;
     opacity: 0.6;
     filter: alpha(opacity=60);
     height:300px;
     width:300px;
     z-index:1; 
     top:-105px;
     left:78%;
     clear:both;
     }

我的图片看起来像这样： [！[在此处输入图像说明] [1]] [1]

我很想拥有它。密码框中不应显示绿色图像。 [！[在此处输入图像说明] [2]] [2]

再次感谢您的帮助。

Answer 1

简短回答，图片必须是loginform的背景图片，例如。 Jsfiddle example

.loginform {  
  width: 500px;
  height: 250px;
  float: left;
  background-image: url('http://www.itsmfonline.org/wp-content/uploads/2014/02/accenture_high_performance.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right center; 
  }

Answer 2

您还可以通过将图像相对于main div放置来实现此目的。在这种情况下，您应该使用z-index。请参阅示例：JSFIDDLE

我创建了自己的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 {
  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;}

Answer 3

检查此示例代码https://jsfiddle.net/gdqkjade/

测试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>

CSS中的图像调整

3 个答案: