2014 dxdy logo

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

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




Начать новую тему Ответить на тему
 
 Html+CSS. FlexBox и фоновый рисунок для секции. Шрифты.
Сообщение14.10.2020, 14:30 


27/09/19
189
Здравствуйте! Помогите, пожалуйста, разобраться с фоновым рисунком для секции и шрифтами.
Код в 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 


21/05/16
4292
Аделаида
kot-obormot в сообщении #1487074 писал(а):

Кхм...

 Профиль  
                  
 
 Re: Html+CSS. FlexBox и фоновый рисунок для секции. Шрифты.
Сообщение16.10.2020, 05:43 
Аватара пользователя


29/05/17
791
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 


27/09/19
189
Хорошо, спасибо! Разобрался!

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

 Профиль  
                  
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ Сообщений: 4 ] 

Модераторы: Karan, Toucan, PAV, maxal, Супермодераторы



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group