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>