Я нашел 7 крутых трюков с CSS backgroundImage

CSS
❝

Добавить Автора Переводчик: Front-end Xiaozhi Источник: гитхаб

❞
❝

"Ставьте лайк и смотрите снова, формируйте привычку"

"эта статьяGitHub GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе."

❞

Фоновое изображение, вероятно, является одним из тех свойств CSS, которые все мы, фронтенд-разработчики, использовали хотя бы несколько раз в своей карьере. Большинство людей думают, что в фоновом изображении не может быть ничего необычного, но после исследований ответ оказывается отрицательным. Итак, в этой статье собраны семь советов, которые я считаю наиболее полезными, и создано несколько примеров кода.

1. Как сделать так, чтобы фоновое изображение идеально соответствовало области просмотра?

Подгонять фоновое изображение к области просмотра легко, просто используйте следующий CSS:

body {
  background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

Исходный код:код спрей.IO/deadly message/spray/…

2. Как использовать несколько фоновых изображений в CSS?

Что делать, если я хочу добавить более одного изображения на фон? Несколько фоновых путей можно указать непосредственно в CSS3 следующим образом:

body {
  background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}

Пример исходного кода:код спрей.IO/deadly message/spray/…

3. Как создать треугольное фоновое изображение

Еще один классный фоновый эффект — это треугольный фон, который даже лучше, когда мы хотим показать несколько совершенно разных вариантов (например, день и ночь или зима и лето).

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

"html"

<body>
  <div class="day"></div>
  <div class="night"></div>
</body>

"css"

body {
  margin: 0;
  padding: 0;
}

div {
position: absolute;
height: 100vh;
width: 100vw;
}


.day {
background-image: url("images.unsplash.com/photo-14779…");
background-size: cover;
background-repeat: no-repeat;
}


.night {
background-image: url("images.unsplash.com/photo-14935…");
background-size: cover;
background-repeat: no-repeat;
clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}

Исходный код:код спрей.IO/deadly message/spray/…

4. Как добавить градиент на фоновое изображение?

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

Например, изображение заката можно улучшить, добавив розово-оранжевый градиент или градиент от красного к прозрачному, что в этих случаях легко сделать с помощью градиента наложения.

"css"

body {
  background-image: 
    linear-gradient(4deg, rgba(38,8,31,0.75) 30%, rgba(213,49,127,0.3) 45%, rgba(232,120,12,0.3) 100%),
    url("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center
}

Исходный код:код спрей.IO/deadly message/spray/…

5. Как создать фон с динамически меняющимися цветами

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

"css"

HTML CSSResult
EDIT ON
@keyframes background-overlay-animation {
  0%   {
      background-image: 
        linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%), url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  25%  {
      background-image: 
         linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  50%  {
    background-image: 
       linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
     url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  100% {
    background-image: 
        linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
        url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
}

@-webkit-keyframes background-overlay-animation {
0%   {
background-image:
linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%)
url("images.unsplash.com/photo-15593…");
}
25%  {
background-image:
linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%),
url("images.unsplash.com/photo-15593…");
}
50%  {
background-image:
linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
url("images.unsplash.com/photo-15593…");
}
100% {
background-image:
linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),

Исходный код:код спрей.IO/deadly message/spray/…

"Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】."

6. Как сделать фоновое изображение сетки?

Иногда есть проекты, которые требуют искусства или фотографии, и они обычно требуют, чтобы веб-сайты содержали художественную информацию и творчество. Фон сети довольно креативный, а эффект следующий:

"HTML"

<body>
<div class="container">
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
</div>
</body>

"scss"

body {
 margin: 0;
  padding: 0;
}

.container {
position: absolute;
width: 100%;
height: 100%;
background: black;
display: grid;
grid-template-columns: 25fr 30fr 40fr 15fr;
grid-template-rows: 20fr 45fr 5fr 30fr;
grid-gap: 20px;
.item_img {
background-image: url('images.unsplash.com/photo-14998…');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
}

Исходный код:код спрей.IO/deadly message/spray/…

7. Как установить фоновое изображение на цвет текста?

использоватьbackground-imageа такжеbackground-clip, вы можете добиться красивого эффекта фонового изображения на тексте. В некоторых случаях это может быть очень полезно, особенно когда мы хотим создать текстовый заголовок большего размера, который не такой скучный, как обычный цвет.

"HTML"

<body>
  <h1>Hello world!</h1>
</body>

"SCSS"

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  min-height: 100vh;
  font-size: 120px;
  font-family:Arial, Helvetica, sans-serif;
}

h1 {
background-image: url("images.unsplash.com/photo-14622…");
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}

Исходный код:код спрей.IO/deadly message/spray/…

"Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug."

Оригинал: https://dev.to/duomly/discover-7-amazing-tips-and-tricks-about-the-css-background-image-39b0

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме."Благосостояние", вы можете увидеть преимущества, вы знаете.

Категории