Как получить отсканированные над фоновым изображением в CSS - PullRequest
Новая
       87

Как получить отсканированные над фоновым изображением в CSS

2 голосов
/ 25 апреля 2020

У меня есть фоновое изображение на всю страницу, на которое я хотел бы наложить линии сканирования. Я хочу воспроизвести более традиционные эффекты диагональной линии сканирования, которые я вырос, увидев в цифровом искусстве нон-хайти, такие как реализованные здесь в маске Bootstrap 5:

enter image description here

Я видел несколько учебных пособий по диагональным линиям сканирования, но не смог найти ничего подобного. Как бы я совершил sh это в CSS?

Ответы [ 4 ]

1 голос
/ 26 апреля 2020

вот приблизительное значение с использованием нескольких фонов: 

html {
  height:100%;
  background:
    radial-gradient(#000 0.5px,transparent 0.5px) 0   0   /3px 3px,
    radial-gradient(#000 0.5px,transparent 0.5px) 1px 1px /3px 3px,
    radial-gradient(#000 0.5px,transparent 0.5px) 2px 2px /3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}

Вы можете сравнить с нижеприведенным рисунком 

html {
  height:100%;
  background:
    url(https://i.ibb.co/C0MjrsJ/05.png),
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}
1 голос
/ 25 апреля 2020

Попробуйте этот код: 

.view {
    position: relative;
    overflow: hidden;
    cursor: default;
}
img{
  position: relative;
    display: block;
}
.view .mask{
  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-attachment: fixed;
  background: url(https://i.ibb.co/C0MjrsJ/05.png);
    background-attachment: fixed;
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
}
<div class="view" bis_skin_checked="1">
                <img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
                <div class="mask pattern-5 flex-center" bis_skin_checked="1">
                    <p class="white-text">.pattern-5</p>
                </div>
            </div>
0 голосов
/ 26 апреля 2020

Все перечисленные ниже методы для выполнения sh были предоставлены Temani, я просто собрал их в одном месте, чтобы их было легче выбирать в зависимости от ваших потребностей.

Решение 1

Это решение воспроизводит эффект точно для Firefox, но может только приблизить эффект для Chrome и Edge, потому что они не поддерживают субпиксельные значения: 

html {
  height:100%;
  /* fallback for Firefox */
  background:
    radial-gradient(#000 0.5px,transparent 0.5px) 0   0   /3px 3px,
    radial-gradient(#000 0.5px,transparent 0.5px) 1px 1px /3px 3px,
    radial-gradient(#000 0.5px,transparent 0.5px) 2px 2px /3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
  /*Chrome and the latest version of Edge*/
  background:
    conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 0   0  /3px 3px,
    conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 1px 1px/3px 3px,
    conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 2px 2px/3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}

Это работает на все современные версии Firefox и Chrome, но только самая последняя версия Edge.

Обратите внимание, что самая последняя версия Edge (на основе Chromium и то, что Microsoft называет «новым Microsoft Edge») в настоящее время доступна только в качестве автономной программы установки, которая не имеет был активно выдвинут Microsoft. Поэтому маловероятно, что пользователи вашего сайта будут использовать эту версию Edge на этом этапе, даже если они на Windows 10 и обновлены.

Решение 2

Это точно такой же метод, который используется Bootstrap в pattern-mask-5, и хотя он работает во всех современных браузерах, он требует использования изображения в дополнение к добавлению контейнер <div> до разметки:

HTML: 

<div class="bg-container">
</div>

CSS: 

.bg-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(local/img.png); /* download the image here: https://i.ibb.co/C0MjrsJ/05.png and link to it */
}

Решение 3

Решение, опубликованное Temani здесь , безусловно, является самым чистым и наиболее кросс-браузерным решением этой проблемы. 

html {
  height:100%;
  background:
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 0   0  /3px 3px,
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 1px 1px/3px 3px,
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 2px 2px/3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}

Он использует SVG и поэтому не требует внешних изображений и работает во всех современных браузерах.

0 голосов
/ 25 апреля 2020

Вот очень простое решение css для горизонтальных линий сканирования с использованием псевдоэлемента: 

.scanlines::after {
  content:'';
  position: absolute;
  width:100%;
  height: 100%;
  background-image: linear-gradient(rgba(39, 43, 46, 0.6) 1px, transparent 1px);
  background-size: 2px 2px;
  background-attachment: fixed;
}

Это создает наложение, соответствующее размеру элемента изображения root. Затем мы создаем линию скана - фактически две линии (одна темная полупрозрачная, одна прозрачная) - и повторяем это. Вы можете настроить цвет и высоту линии здесь: 

background-image: linear-gradient(rgba(39, 43, 46, 0.6) 1px

и расстояние между строками здесь: 

background-size: 2px 2px;

Элемент root выглядит так в моем случае: 

/* The background/header image */

.scanlines {   
  background-image: url('https://www.telegraph.co.uk/content/dam/Travel/2018/January/sydney-best-GETTY.jpg?imwidth=1400');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width:100vw;
  height:100vh;
  position: relative;    
}

Codepen здесь :

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

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

...