CSS中的图像调整

Question

为图像提供了一些帮助。

这是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股利。 在这种情况下，您应该使用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>