Фоновое изображение и границы - PullRequest
Новая
       0

Фоновое изображение и границы

0 голосов
/ 27 сентября 2018

У меня есть фоновое изображение, и я хочу добавить рамку и белый фон шириной 18 см. Вот пример ниже:

enter image description here

У нас есть фоновое изображение с рамкой и белым фоном внутри ..

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

enter image description here

HTML 

<div class="img_reg">
        <div class="contenair_reg">
            <span class="regtxtcolor"><i class="far fa-address-card"> Personal Information:</i></span>
            <p>Please use English letters and numbers in all field for registration before creating an account.</p>
        </div>
    </div>

CSS 

.contenair_reg{
  padding-top: 60px; 
  padding-left: 320px;


}

.regtxtcolor{
  font-size: 26px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #C22312;
  font-weight: bold;

}

Это мои HTML-блоки в порядке?

Ответы [ 3 ]

0 голосов
/ 27 сентября 2018

Возможно, вам нужно установить цвет фона и поля.Используйте отступы для фона, а не для отдельного контейнера*

0 голосов
/ 27 сентября 2018 

.box{
  background:url('https://preview.ibb.co/kv4XHU/66.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  height: 300px;

}

.box { padding: 150px 35px 0 35px; }
.box-content {
  padding:15px;
  background-color: #ffffff;
  border-radius: 5px;
}
.box-icon {
  font-size: 24px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #C22312;
  font-weight: 700;
}
.box-content p { margin-bottom: 12px; }
.box-text{  border-bottom:3px solid #C22312; }
  <div class="box">
    <div class="box-content">
      <span class="box-icon"><i class="far fa-address-card"> Personal Information:</i></span>
      <div class="box-text">
      <p>Please use English letters and numbers in all field for registration before creating an account.</p>
      </div>
    </div>
  </div>
0 голосов
/ 27 сентября 2018

Привет, что я сделал, заключил элемент

в div с классом .reg_content_container, чтобы я мог добавить границу под ним.Пожалуйста, запустите фрагмент, спасибо. 

body{
  height:100%;
  background:url('https://edmontongazette.com/wp-content/uploads/2018/07/California.jpg');
  background-size:cover;
}

.body_padding{
  padding:60px 30px 0px 30px;
}

.contenair_reg{
  padding:15px;
  background-color:white;
  border-radius:5px;
}

.regtxtcolor {
  font-size: 26px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #C22312;
  font-weight: bold;
}

.contenair_reg p{
  margin-bottom:8px;
}

.reg_content_container{
  border-bottom:3px solid #C22312;
}
<html>

<body>
  <div class="body_padding">
    <div class="contenair_reg">
      <span class="regtxtcolor"><i class="far fa-address-card"> Personal Information:</i></span>
      <div class="reg_content_container">
      <p>Please use English letters and numbers in all field for registration before creating an account.</p>
      </div>
    </div>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...