Тип ввода текста и фоновое изображение

Question

Я начал код на прошлой неделе в php/html/css, и по этой причине я не эксперт в веб-программировании. Моя цель эта картина:

Таким образом, я буду использовать эту картинку в качестве фонового изображения в отдельном файле CSS (естественно, без двух «ввода текста»), до сих пор нет никаких проблем. Мой вопрос, начатый с этой картины, как можно вставить два входных текста «Внутри» (я знаю, что это не правильный мир, но я точно не знаю, что это, извините за это) эту картину? Каким образом я должен следовать?

Извините, если формат вопроса неправильный, но я новичок в веб-программировании.

Answer 1

Я сделал вам примерную ручку взглянуть на это Codepen Удачи вам!

<div class="container"> 
    <div class="inputs"> 
    <input type="text" /><br /> 
    <input type="password" /> 
    <input type="submit" value="Login" /> 
    </div> 
</div> 

CSS

* { 
    box-sizing: border-box 
} 

html, 
body { 
    margin: 0; 
    padding: 0; 
} 

body { 
    background-image: url(http://wallpapersrang.com/wp-content/uploads/2015/12/black-jumpman-logo-jordan-wallpaper-tumblr-backgrounds-cool.png); 
    background-size: cover; 
} 

.container { 
    width: 100%; 
    height: 300px; 
    background-color: rgba(255, 255, 255, .5); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

.inputs { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

Answer 2

Вы можете делать такие вещи разными способами, используя фоновое изображение и непрозрачность. в любом случае для вас ссылка Я использую быструю реализацию here