Мой Css для цвета фона не будет заполнять весь раздел - PullRequest
Новая
       38

Мой Css для цвета фона не будет заполнять весь раздел

1 голос
/ 05 июля 2019

Предполагается, что сайт представляет собой прокручиваемый параллакс-сайт с несколькими фиксированными фоновыми изображениями.В этом конкретном разделе проблемы, у меня есть два div рядом друг с другом.верхний имеет фиксированное фоновое изображение с текстом h2.Его вид должен служить своего рода заголовком для нижнего элемента div, который содержит мой информационный текст.По какой-то причине, когда я устанавливаю цвет фона для div информационного текста, между нижней частью div фиксированного изображения и верхней частью div информационного текста остается тонкий белый пробел.

Я знаю, что подобные вещи могут быть вызваны сворачиванием полей, поэтому я попробовал следующее:

Я попытался установить поля равными 0px (также 1px), убрав все поля и вместо этого используя отступы., установив все отступы на 0px и 1px, изменив размер изображения и изменив высоту изображения.Ничего не сработало. 

.aboutme {
  background: url('../img/aboutme11.png') no-repeat;
  font: 'Century Gothic';
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 25%;
  position: absolute;
  color: #fff;
  font-size: 800%;
}

.aboutmetxt {
  font-size: 150%;
  overflow: auto;
  padding: 0px 80px;
  background-color: #323232;
  color: #f2f2f2;
}
<div id="paralax1" class="aboutme">
  <h2 style="font-size:100%; padding-top:50px;">About Me
    <h2>
</div>

<div id="aboutme" class="aboutmetxt">
  <p> I am a self taught Front end developer and Graphic Designer Currently Located in Los Angeles California. I am pursuing an opportunity to began a career in Web Development. This responsive website site was one of my first projects. I built using the
    skills I have learned from programing in JavaScript, HTML and CSS. I Currently attend California State University Northridge and am finishing my BA in Graphis Design with a minor in Computer Science.     </p>
</div>

Ответы [ 2 ]

0 голосов
/ 05 июля 2019

Итак, в вашем коде много ошибок: от неправильного написания текста обо мне до использования неправильного свойства CSS.Итак, я попытался исправить все из них ...

Вот ваш оригинальный код: https://jsfiddle.net/tvdchajo/1/

Вот новый код (я знаю, что большинство людей просто хотят код, а не объяснение.) 

.aboutme {
  background: url('../img/aboutme11.png'), no-repeat;
  font-family: 'Century Gothic';
  position: relative;
  min-height: 25%;
  position: absolute;
  color: #fff;
  font-size: 800%;
}

.aboutmetxt {
  font-size: 150%;
  overflow: auto;
  padding: 0px 80px;
  color: #f2f2f2;
}

body {
  background-color: #323232;
}
<div id="paralax1" class="aboutme">
  <h2 style="font-size:100%; padding-top:50px;">
    About Me
  </h2>
</div>

<div id="aboutme" class="aboutmetxt">
  <p> I am a self taught Front-End Developer and Graphics Designer. I am currently located in Los Angeles, California. I am pursuing an opportunity to begin a career in Web Development. This responsive website site was one of my first projects. I built using the
    skills I have learned from programming in HTML, CSS and JavaScript. I'm currently attending 'California State University, Northridge' and I'm finishing my BA in Graphics &  Design with a minor in Computer Science. 
  </p>
</div>

В общем, все, что я здесь сделал, это дал body { цвет фона, который вы использовали для .aboutmetxt {.

Вот еще один JSFiddleмоей версии вашей веб-страницы: https://jsfiddle.net/tvdchajo/2/

Используйте VW и VH для адаптивных веб-сайтов.Это две очень полезные единицы CSS.

0 голосов
/ 05 июля 2019

Я создал скрипку, используя ваш код, и внес в нее некоторые изменения, надеюсь, это поможет:

https://jsfiddle.net/1npm4g2j/18/

Я по большей части оставил ваш HTML один:

HTML 

<div id="paralax1" class="aboutme" >
 <h2>About Me<h2>
</div>

<div id="aboutme" class="aboutmetxt">
 <p> I am a self taught Front end developer and Graphic Designer Currently Located
  in Los Angeles California. I am pursuing an opportunity to began a career in
 Web Development. This responsive website site was one of my first projects.
 I built using the skills I have learned from programing in JavaScript, HTML and CSS.
 I Currently attend California State University Northridge and am finishing my
 BA in Graphis Design with a minor in Computer Science.</p>
</div>

Ваш CSS - то, где я сделал большинство изменений:

CSS 

html{
 background-color: #323232;
 height: 110vh;

overflow: scroll;
}

.aboutme{
  position: fixed;
  display: block;

 top: 5%;
 left: 15%;

 background:url('../img/aboutme11.png') no-repeat;
 font:'Century Gothic';

 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
 background-attachment: fixed;

 min-height: 25%;
 color:#fff;
}

.aboutmetxt{
 font-size: 150%;
 overflow: auto;
 padding: 0px 80px;
 background-color: #323232;
 color:#f2f2f2;
}

h2{
 font-size: 126px;

}

...