2014 dxdy logo

Научный форум dxdy

Математика, Физика, Computer Science, Machine Learning, LaTeX, Механика и Техника, Химия,
Биология и Медицина, Экономика и Финансовая Математика, Гуманитарные науки




 
 Html+CSS. FlexBox и фоновый рисунок для секции. Шрифты.
Сообщение14.10.2020, 14:30 
Здравствуйте! Помогите, пожалуйста, разобраться с фоновым рисунком для секции и шрифтами.
Код в css и html, а также этот же код здесь https://jsfiddle.net/z01bcfje/. Могу сюда продублировать, если нужно, будет в оффтопе.
Фоновый рисунок (1920x1280) для секции не подгружается (а другие картинки подгружаются), к сожалению. Причем независимо от того - где лежит картинка - в папке, а работает или если ссылка ведет на хостинг для хранения фото. Другие картинки получается организовать, а вот фоновый рисунок - нет.
Я хочу научиться помещать картинку в отдельные боксы как фон для бокса, а также в флекс-контейнеры как фон для контейнера.
Также не очень понимаю - как в флекс-боксах настраивать стили для шрифтов, они почему-то не меняются совсем никак, даже цвет.

(Оффтоп)

Код:
<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <title>Структура</title>
   <link rel="stylesheet" href="css/main.css">
</head>
  <body>

               
                    <div class="row align-items-center justify-content-center">
                     <div class="my-flex-container-3">

      <div class="box-1">
        <h2>Box 1</h2>
        <p> Может когда-нибудь у меня получится разобраться в html и css
        </p>
      </div>
      <div class="box-2">
     
   
                </div>
            </div>
<div class="my-flex-container-4">

      <div class="box">
        <h2>Box 1</h2>
        <p> Проверяем блоки 2</p>
      </div>
      <div class="box">
        <h2>Box 2</h2>
         <p> Проверяем блоки 2</p>
      </div>

                     
                    </div>

 

</div>

   


    <div class="flex-container">

      <div class="my-flex-container-2"> <!-- ПОИСКОВИКИ -->

  <p>
    <a href="https://yandex.ru"><img src="img/иконка_whatsapp.png" alt="" style="width: 50px" ></a>
       
    <a href="https://yandex.ru"><img src="img/vk.png" alt="" style="width: 50px" ></a>
       
    <a href="https://yandex.ru"><img src="img/fb.png" alt="" style="width: 50px" ></a>
       
    <a href="https://yandex.ru"><img src="img/tg.png" alt="" style="width: 50px" ></a>
    
</p> 
</div>
</div>

  </body>
</html>

Код:
body {
      
      padding: 0;
      margin: 0;
      color: #222222;
      
      height: 740px;
      font-size: ;
      background: url(hps://a.radikal.ru/a32/2010/27/1dc9e7ed99c5t.jpg) no-repeat center top / cover;
}



.flex-container {
flex-direction: row;
margin-top: 10px;

}



.my-flex-container-2 {
   display: flex;
color: rgb(0, 6, 255); /* темный ультрамалиновый, фиолетовый*/
margin-bottom: 30px;
      flex-direction:row;
   justify-content: center;
   align-items:center;
   }


.my-flex-container-3{
display: flex;
align-items: center;
/* background-image: url(https://a.radikal.ru/a32/2010/27/1dc9e7ed99c5t.jpg) no-repeat center top / cover; */
background-repeat:no-repeat;

background-position: center 64px;
width: 1366px;
height:990px;
   padding:16px;

margin:0 auto;
}
.my-flex-container-4{
   display: flex;
align-items: center;
}
.my-flex-container-3, .my-flex-container-4 div{
padding: 10px; border: 2px solid silver;
background-image: url(img/stok.jpg) no-repeat center top / cover;
}
   
   .box-1{
flex: 1;
border: 3px solid red;
   }
   .box-2{
flex: 2;
border: 3px solid green;
background: url(https://a.radikal.ru/a32/2010/27/1dc9e7ed99c5t.jpg) no-repeat center top / cover;
   }
   .box{
background-image: url(hps://a.radikal.ru/a32/2010/27/1dc9e7ed99c5t.jpg)
}

.box-1 {
   font color: white;
}

.H2 {color: white; /* синий цвет */}

 
 
 
 Re: Html+CSS. FlexBox и фоновый рисунок для секции. Шрифты.
Сообщение15.10.2020, 18:28 
kot-obormot в сообщении #1487074 писал(а):

Кхм...

 
 
 
 Re: Html+CSS. FlexBox и фоновый рисунок для секции. Шрифты.
Сообщение16.10.2020, 05:43 
Аватара пользователя
kot-obormot в сообщении #1487074 писал(а):
также не очень понимаю - как в флекс-боксах настраивать стили для шрифтов


Обычным образом:


Используется синтаксис HTML
.color_w {
  color: white;
  font-size: 1.4rem;
}

...

<p class="color_w"> Может когда-нибудь у меня получится разобраться в html и css
</p>


-- 16.10.2020, 06:37 --

kot-obormot в сообщении #1487074 писал(а):
Я хочу научиться помещать картинку в отдельные боксы как фон для бокса


Как вариант, правильно задайте background для div.

 
 
 
 Re: Html+CSS. FlexBox и фоновый рисунок для секции. Шрифты.
Сообщение18.10.2020, 11:18 
Хорошо, спасибо! Разобрался!

P.S. Да, с ссылкой были проблемы, нужно было указать еще 2 буквы tt

 
 
 [ Сообщений: 4 ] 


Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group