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

CSS - цвет фона вокруг изображения с несколькими прозрачными пикселями

0 голосов
/ 04 июня 2018

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

Проблема в том, что мне нужно, чтобы все пространство вокруг было черным.Если я установлю его на background: black url(... - прозрачные пиксели изображения также станут черными, что неправильно.

Другая проблема заключается в том, что контент сайта является динамическим, поэтому я не могу использовать 2 DIV с одним и тем же фоновым изображением.и разные фильтры.Мне нужно ясно видеть через прозрачные пиксели.

Мой текущий код: 

<html>
<head>
    <style>
        .image {
            height: 100%;
            background: black url(image.png) center center no-repeat;
            background-size: auto 100%;
        }   
    </style>
</head>

<body>
    <div class="image"></div>
</body>
</html>

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

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

Я бы предложил огромную коробку-тень; 

body {
  background: pink;
  display: flex;
  height: 100vh;
}

.wrap {
  height: 200px;
  width: 200px;
  border: 1px solid green;
  margin: auto;
  background-image: url(https://www199.lunapic.com/editor/premade/transparent.gif);
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
  box-shadow: 0 0 0 2000px red;
}
<div class="wrap"></div>
0 голосов
/ 04 июня 2018

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

Вот пример, где я использовал квадратное изображение: 

body {
 margin:0;
 height:100vh;
 background:pink;
}

.image {
  height: 100%;
  background:  
   linear-gradient(#000,#000) left/calc((100vw - 100vh)/2) 100%  no-repeat,
   linear-gradient(#000,#000) right/calc((100vw - 100vh)/2) 100%  no-repeat,
   
   url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png) center center/auto 100% no-repeat;
}
<div class="image"></div>

Другой пример с другой настройкой того же изображения: 

body {
 margin:0;
 height:100vh;
 background:pink;
}

.image {
  height: 100%;
  background:  
   linear-gradient(#000,#000) top/ 100% calc((100vh - 158px)/2)  no-repeat,
   linear-gradient(#000,#000) bottom/ 100% calc((100vh - 158px)/2)  no-repeat,
   linear-gradient(#000,#000) left/calc((100vw - 158px)/2) 100%  no-repeat,
   linear-gradient(#000,#000) right/calc((100vw - 158px)/2) 100%  no-repeat,
   
  url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png) center center no-repeat;
}
<div class="image"></div>
...